为啥 jQuery UI 的日期选择器会与动态 DOM 发生冲突?

Posted

技术标签:

【中文标题】为啥 jQuery UI 的日期选择器会与动态 DOM 发生冲突?【英文标题】:Why does jQuery UI's datepicker break with a dynamic DOM?为什么 jQuery UI 的日期选择器会与动态 DOM 发生冲突? 【发布时间】:2010-11-06 17:50:54 【问题描述】:

我在这里使用动态 DOM,并已将 jQuery UI 日期选择器调用到具有特定类名的所有输入,在本例中为 .date

它适用于第一个静态构造,但是当我克隆它时,事件处理程序似乎不想移动。我收到 Firebug 错误:

inst 未定义

我尝试研究 jQuery 的新 live() 函数,但无法将两者结合起来。有什么想法吗?

【问题讨论】:

【参考方案1】:

啊,明白了。在我将 html 附加到 DOM 之后,我在所有想要弹出日期选择器的输入上运行它。 Datepicker 将一个类添加到它已附加到的元素中,因此我们可以过滤掉现有的输入并仅将其应用于新的输入。

$('.date').not('.hasDatePicker').datepicker();

我希望这对人们有所帮助,因为我在谷歌上搜索了几天但没有找到任何东西!

您还应该注意,通过将其设置为上下文而不是整个页面,在新生成的 HTML 中检查 input.date 会更快,因为这样可以节省时间,因为这是一个更高效的操作。

【讨论】:

威尔,非常感谢!你救了我几个小时的命:) 当使用动态 DOM 时,当我 (jquery) 使用事件克隆表行时,此解决方案对我没有帮助。我的解决方案是 $('.date').removeClass('hasDatepicker').datepicker(); David,您使用的是哪个 jQuery 核心和 UI 版本?这分别适用于 1.3.2 和 1.7,并且该解决方案已与其他实现一起使用。不管你的船是什么! 这帮助我解决了我的问题。我的问题是我在输入中添加了一个名为 hasDatepicker 的类,与 Jquery ui 无关。 Jquery ui 代码在应用 datepicker 之前显然会检查这个类,这会阻止它工作!不要将名为 hasDatepicker 的类添加到您想要实际添加日期选择器的输入中!它会导致错误消息inst is undefined【参考方案2】:

我有一个类似的问题,我在一个页面上有多个表格,每个表格都有多个日期选择器,同样在单击“AddLine”按钮时,它添加了一个带有动态 HTML 和日期选择器的表格行。

经过大量搜索,我意识到我的输入日期字段没有定义“id”,它们看起来像这样

<input type="text" class="datepicker" name="mDate1" value="" size=8 >

jquery 将所有日期字段值指向页面上定义的第一个日期字段,日历会在所有日期字段上弹出,但第一个日期字段的值会改变,我对 html 进行了这样的更改

<input type="text" class="datepicker" id="Date1" name="mDate1" value="" size=8 >

通过添加“id”并开始工作,对于动态日期字段,我像这样更改 Id

var allColumns = $("#"+$tableId+" tr:last td"); 
        $(allColumns).each(function (i,val) 
            if($(val).find(":input").hasClass("datepicker"))
                $(val).find(":input").attr("id",newId+$(val).find(":input").attr("id"));
            
        );

【讨论】:

【参考方案3】:

您需要使用 'live' 事件来使其与动态 DOM 一起工作。因此,如果您的日期选择器输入的类是“日期输入”,则以下代码将使其工作:

$(document).ready(function() 
    $('.date-input').live('click', function() 
    $(this).datepicker('destroy').datepicker(showOn:'focus').focus();
        );
);

【讨论】:

没有。每次单击输入时,您都在重新创建一个日期选择器,这是不高效的。 +1 表示简单,并且在其他解决方案出现问题时也能正常工作 那我想你是那种不以自己的工作为荣的程序员 我已经改进了这个答案以避免重新创建日期选择器并在第一次点击/聚焦时显示【参考方案4】:

这可能有点晚了,但上面的所有建议都对我不起作用,我想出了一个简单的解决方案。

首先,是什么导致了问题: JQuery 将 datepicker 分配给元素 id。如果你正在克隆元素,那么同样的 id 也可能被克隆。哪个 jQuery 不喜欢。无论您单击哪个输入字段,您最终都可能会收到空引用错误或分配给第一个输入字段的日期。

解决方案:

1) 销毁日期选择器 2)为所有输入字段分配新的唯一ID 3) 为每个输入分配日期选择器

确保您的输入是这样的

<input type="text" name="ndate[]" id="date1" class="n1datepicker">

在克隆之前,销毁日期选择器

$('.n1datepicker').datepicker('destroy');

克隆后,也添加这些行

var i = 0;
$('.n1datepicker').each(function () 
    $(this).attr("id",'date' + i).datepicker();
    i++;
);

奇迹发生了

【讨论】:

您所做的工作超出了您的需要 - 摧毁一切并重建一切。【参考方案5】:

使用

$j(id or class).removeClass('hasDatepicker').datepicker();

它正在工作

【讨论】:

不过,您并没有破坏日期选择器,这意味着每次触发该代码时,您实际上都在重新绑定某些内容。因此,您将拥有两个而不是一个日期选择器(或者它会发生两次 - 未经测试)。所以,是的,它可能看起来有效,但它不会发挥最佳作用。 不幸的是,除了在新元素上设置日期选择器之外,您所做的是将所有内容重新绑定到以前创建的元素,这将占用内存。这在短时间内可能不会被注意到,但如果页面从未重新加载并且您多次执行此操作,您会注意到差异。照顾内存通常被认为是良好的编程习惯:)【参考方案6】:

使用 jQuery 选择器:

$(".mydatepicker:not(.hasDatepicker)").datepicker()

【讨论】:

【参考方案7】:

页面上jquery-ui库的多个实例也会导致这个错误。删除冗余实例适用于我的情况

【讨论】:

【参考方案8】:

我遇到了同样的症状,这是由于包含 td 的元素具有与输入相同的 id 属性,

 <td id="fld_xyz"><input id="fld_xyz" class="date" /></td>

我知道这并不理想,但值得知道 datepicker 组件似乎依赖于 id 的唯一性。

【讨论】:

是的。 ID 应该是唯一的。如果你想识别同一个类的多个元素,那么使用class属性。【参考方案9】:

我遇到了这个问题。我的情况最终是我有另一个元素与日期选择器的输入具有相同的 ID。

【讨论】:

我遇到了同样的问题 - 包含输入文本字段的 div 与文本字段具有相同的 ID。删除 div 上的 id 解决了这个问题。【参考方案10】:

今天我遇到了同样的问题...我在我的应用程序中使用datetimepicker 插件。 也使用 jquery 的默认日期选择器。当我在准备好文档时同时调用它们时,我会收到错误inst is undefined

    $(document).ready(function()
        $(".datepickerCustom").datetimepicker();
        $(".datepicker").datepicker();
        $("#MainForm").validationEngine('attach');
        ....
    );

所以我将代码更改为在文档准备好之前调用,如下所示:

    $(".datepickerCustom").datetimepicker();
    $(".datepicker").datepicker();
    $(document).ready(function()
        $("#MainForm").validationEngine('attach');
        ....
    );

现在一切正常。没问题。

【讨论】:

【参考方案11】:

我遇到了类似的问题,数据选择器在第一次调用后无法正常工作。我在这里找到了我的问题的答案:

http://www.stemkoski.com/problem-with-jquery-ui-datepicker-dynamic-dom/

我正在从模板中动态克隆部分,无意中包含了 datepicker 在调用时添加的类:

hasDatepicker

我在克隆模板后调用了我的第一个 datepicker 调用,并且成功了。然后我在每个克隆实例之后添加了一个 datepicker 调用:

$(source).clone().appendTo(destination).find(".datepicker").datepicker();

【讨论】:

链接失效【参考方案12】:

在这里尝试了许多答案后,这对我有用,并在第一次点击/聚焦时显示

function vincularDatePickers() 
    $('.mostrar_calendario').live('click', function () 
        $(this).datepicker( showButtonPanel: true, changeMonth: true, changeYear: true, showOn: 'focus' ).focus();
    );

这需要您的输入具有“mostrar_calendario”类

live 适用于 JQuery 1.3+,您需要将其调整为“on”

在此处查看更多关于差异的信息http://api.jquery.com/live/

【讨论】:

【参考方案13】:

如果还是不行,那是因为克隆了id。您可以像这样完全删除日期选择器:

$(selector).removeClass('hasDatepicker').removeAttr('id').datepicker();

【讨论】:

以上是关于为啥 jQuery UI 的日期选择器会与动态 DOM 发生冲突?的主要内容,如果未能解决你的问题,请参考以下文章

为啥打开对话框后我的 jQuery 选择器会失败?

jQuery UI 动态启用日期

带有手动输入和动态最小日期的 jQuery UI 日期选择器

使用 jquery-ui datepicker 的 knockoutjs 数据绑定

动态创建的文本框想要加上jQuery的datepicker功能变成日期选择控件该怎么办?

为啥在我将不相关的 div 添加到 DOM 后,JQuery UI Datepicker 停止工作?