克隆后的jQuery UI datepicker分配

Posted

技术标签:

【中文标题】克隆后的jQuery UI datepicker分配【英文标题】:jQuery UI datepicker assignment after clone 【发布时间】: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 是什么?让我们确保您正确连接到它。 【参考方案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

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

【讨论】:

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

选择器:

var element = "idStartDate_"+count;   

id 选择器无效,尝试将其更改为:

var element = "#idStartDate_"+count;

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

【讨论】:

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

以上是关于克隆后的jQuery UI datepicker分配的主要内容,如果未能解决你的问题,请参考以下文章

使用 jquery-ui/datepicker 的内存泄漏

jquery UI datepicker汉化

使用 jquery 验证和 jquery-ui datepicker

将 JQuery UI Datepicker 与来自 Jquery UI 主题的图标一起使用

jquery Ui datepicker()

jquery ui datepicker怎么设置默认日期