为什么jquery ui的datepicker与动态dom中断?

啊,明白了。在我将HTML附加到DOM之后,我会在所有输入上运行这个,我希望弹出一个日期选择器。datepicker将类添加到它已附加到的元素中,因此我们可以筛选出现有的输入,并仅将其应用于新的输入。

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

我希望这能帮助人们,因为我在谷歌上搜索了好几天,却什么也没找到!

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

我有一个类似的问题,我在一个页面上有多个表,每个表都有多个日期选择器,而且在单击按钮“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"));
            }
        });

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

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

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

首先,是什么导致了这个问题: 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++;
});

魔法就发生了

使用

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

它正在工作

使用jquery选择器:

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

页面上的jquery UI库的多个实例也会导致此错误。删除冗余实例对我的案例有效

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

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

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

我有这个问题。我的情况是,我有另一个元素的ID与datepicker输入的ID相同。

今天我也面临同样的问题…我正在使用 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');
        ....
    });

现在一切正常。没问题。

我有一个类似的问题,数据选择器在第一次调用后不工作。我在这里找到了我的问题的答案:

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

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

hasDatepicker

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

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

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

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/

如果它仍然不起作用,那是因为克隆的ID。您可以像这样完全删除日期选取器:

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