Question

我在这里使用动态DOM，并将jQuery UI datepicker调用到具有特定类名的所有输入，在本例中为.date

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

inst未定义

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

Answer 1

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

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

我希望这可以帮助人们，因为我谷歌搜索了好几天没找到任何东西！

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

Answer 2

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

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

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

jquery将所有日期字段值指向页面上定义的第一个日期字段，日历将在所有日期字段上弹出，但第一个日期字段的值将更改，我更改了html，如此< / p>

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

Answer 3

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

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

Answer 4

使用

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

它正在运作

Answer 5

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

首先，导致问题的原因是： JQuery将datepicker分配给元素id。如果你是克隆元素，那么也可以克隆相同的id。哪个jQuery不喜欢。您最终可能会收到空引用错误或分配给第一个输入字段的日期，无论您单击哪个输入字段。

解决方案：

1）销毁datepicker 2）为所有输入字段分配新的唯一ID 3）为每个输入分配datepicker

确保您的输入是这样的

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

在克隆之前，销毁datepicker

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

克隆后，也可以添加这些行

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

并且魔术发生了

Answer 6

使用jQuery选择器：

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

Answer 7

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

Answer 8

我遇到了相同的症状，这是因为让td包含与输入具有相同id属性的元素，

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

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

Answer 9

我有这个问题。我的情况最终是因为我有另一个元素与使用datepicker的输入具有相同的ID。

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

现在每件事情都很好。没问题。

Answer 11

如果它仍然不起作用，那是因为克隆如果。您可以像这样完全删除datepicker：

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

Answer 12

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

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

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

hasDatepicker

在我克隆模板后，我放置了第一个datepicker调用。然后我在每个clone实例之后添加了一个datepicker调用：

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

Answer 13

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

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/

为什么jQuery UI的datepicker会破坏动态DOM？

13 个答案: