克隆后的jQuery UI日期选择器分配

我克隆了一个HTML表格行并将其附加到表格末尾。其中一个字段是开始日期。我想将jQuery UI日期选择器添加到克隆的行，但我无法使其工作。在.clone之后，在它附加到表的末尾之前，输入和选择元素id和name属性都加1。在模板行中，我将datepicker添加到idStartDate，并且在克隆/追加新ID时会是idStartDate_（行号）。 $（element）.datepicker（）不应该工作吗？当我在克隆行的chrome中执行一个检查元素时，它已经分配了hadDatepicker类，但我仍然无法让选择器激活。克隆后的jQuery UI日期选择器分配

$("#addRow").click(function() { 

     count++;   

     $("#rowCount").val(count); 

     var $clone = $("#ids tbody tr:first").clone(); 

     $clone.attr({ 
      id: "emlRow_" + count, 
      name: "emlRow_" + count, 
      style: "" 
     }); 
     $clone.find("input,select").each(function(){ 
      $(this).attr({     
       id: $(this).attr("id")+"_" + count, 
       name: $(this).attr("name")+"_" + count 
      });   

     }); 
     $("#ids tbody").append($clone); 

     var element = "idStartDate_"+count;   
     $(element).datepicker(); 
    })

来源

2015-09-18 Steve Salowitz

字符串'element'是否有正确的CSS选择器？比如'＃idStartDate_3'（用'＃'）来正确选择元素？另一种选择可能是点击处理程序未正确绑定到DOM上的新元素。您也可以在Chrome的开发工具面板中检查点击附件。 –

模板和克隆行的样式相同。如何检查Chrome中的单击附件？ –

当您打开Inspector时，请转至顶部的'Sources'选项卡。然后，在右侧，您会看到“Event Listener Breakpoints”。展开，展开'Mouse'，并选中'click'旁边的复选框。然后，点击一下。如果附加了点击处理程序，JavaScript将暂停，您将看到在“Sources”选项卡中突出显示的相关处理代码。 –

'hasDatepicker'类因为克隆而被添加到目标元素，而不是jQuery。一旦我删除了该类，然后将.datepicker（）添加到它正常工作的元素中。

$("#addRow").click(function() { 

     count++;   

     $("#rowCount").val(count); 

     var $clone = $("#ids tbody tr:first").clone(); 

     $clone.attr({ 
      id: "emlRow_" + count, 
      name: "emlRow_" + count, 
      style: "" 
     }); 
     $clone.find("input,select").each(function(){ 
      $(this).attr({     
       id: $(this).attr("id")+"_" + count, 
       name: $(this).attr("name")+"_" + count     
      });   

      if($(this).attr("name")=="idStartDate_"+count){ 
       $(this).removeClass('hasDatepicker') 
       $(this).datepicker();        
      }     
     }); 

     $("#ids tbody").append($clone); 
     $(".datePick").datepicker();    
})

来源

2015-09-18 20:28:47

我想我为你找到了一些答案，或者至少在某处可以帮到你。这个问题可能与jQuery如何附加到像这样动态创建的元素有关。下面是其中突出的问题，线程数，你会如何解决这个问题：

putting datepicker() on dynamically created elements - JQuery/JQueryUI

jQuery Datepicker does not work in dynamic element

从这些

除此之外，我怕我在任何更多的想法的损失。

来源

2015-09-18 19:04:44

您在正确的路径！ http://stackoverflow.com/问题/ 5788999/jquery-datepicker-on-cloned-elements 这帮了我的忙。'hasDateicker'类被克隆而不是jQuery所添加，所以它永远不会被激活，一旦我删除它，然后添加.datepicker到元素我很好去 –

的选择：

var element = "idStartDate_"+count;

不是由标识有效选择尝试将其更改为：

var element = "#idStartDate_"+count;

的hasDatepicker是在元素上，因为它的克隆。

来源

2015-09-18 19:09:25

这不起作用 –

请提供一个小提琴来测试问题 –

克隆后的jQuery UI日期选择器分配

回答

相关问题