克隆后的jQuery UI datepicker分配答案

【问题标题】：jQuery UI datepicker assignment after clone克隆后的jQuery UI datepicker分配
【发布时间】：2015-12-15 23:22:23
【问题描述】：

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

    $("#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();
    })

【问题讨论】：

字符串 element 中是否有正确的 CSS 选择器？比如#idStartDate_3（跟#）能正确选择元素吗？另一个选项可能是单击处理程序未正确绑定到 DOM 上的新元素。您也可以在 Chrome 的开发工具面板中检查点击附件。
打开 Inspector 后，转到顶部的 Sources 选项卡。然后，在右侧，您会看到Event Listener Breakpoints。展开它，展开Mouse，然后选中click 旁边的框。然后，去点击一些东西。如果附加了点击处理程序，则 javascript 将暂停，您将在 Sources 选项卡中看到相关的处理代码。
这与单击附加了日期选择器的“原始”元素时的行为不同，对吧？在克隆之后，我仍然认为 datepicker 没有正确附加到新的 DOM 元素。
我有另一个想法。您应该将datepicker() 链接到append() 的末尾。所以它看起来像$("#ids tbody").append($clone).datepicker();
好的，等等，等等。因此，在该函数结束时，您将 element 设置为 'idStartDate_'+count，但该 id 从未分配给元素本身。相反，您为克隆提供了"emlRow_" + count 的ID。克隆后，被克隆元素的实际 id 是什么？让我们确保您正确连接到它。

标签： jquery jquery-ui

【解决方案1】：

'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();            
})

【讨论】：

【解决方案2】：

我想我为你找到了一些答案，或者至少找到了可以帮助你的地方。这个问题可能与 jQuery 如何附加到像这样动态创建的元素有关。这里有几个线程突出了这个问题以及你可以如何解决它：

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

jQuery Datepicker does not work in dynamic element

除了这些，恐怕我对更多的想法一无所知。

【讨论】：

您走在正确的道路上！ stackoverflow.com/questions/5788999/… 这帮助了我。 'hasDateicker' 类是由克隆而不是 jQuery 添加的，因此它永远不会激活。一旦我删除它，然后将 .datepicker 添加到我很高兴的元素中。

【解决方案3】：

选择器：

var element = "idStartDate_"+count;

id 选择器无效，尝试将其更改为：

var element = "#idStartDate_"+count;

hasDatepicker 位于元素上，因为它已被克隆。

【讨论】：

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