33

我在这里使用动态 DOM，并已将 jQuery UI 日期选择器调用到具有特定类名的所有输入，在这种情况下.date

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

inst 未定义

我尝试研究 jQuery 的新live()功能，但无法将两者结合起来。有任何想法吗？

4

13 回答 13

41

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

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

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

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

于 2009-06-29T16:04:26.150 回答
5

我有一个类似的问题，我在一个页面上有多个表格，每个表格都有多个日期选择器，同样在单击“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"));
            }
        });
于 2009-08-10T19:46:28.687 回答
4

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

$(document).ready(function() {
    $('.date-input').live('click', function() {
    $(this).datepicker('destroy').datepicker({showOn:'focus'}).focus();
        });
});
于 2010-08-25T21:39:38.130 回答
4

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

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

解决方案：

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

确保您的输入是这样的

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

神奇的事情发生了

于 2013-06-17T16:41:10.300 回答
3

采用 

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

这是工作

于 2010-03-10T19:16:02.297 回答
2

使用 jQuery 选择器：

$(".mydatepicker:not(.hasDatepicker)").datepicker()
于 2009-09-29T04:19:25.957 回答
1

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

于 2011-09-16T11:48:34.230 回答
0

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

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

我知道这无论如何都不理想，但值得知道 datepicker 组件似乎依赖于 id 的唯一性。

于 2010-01-29T18:15:32.040 回答
0

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

于 2010-02-04T22:58:05.220 回答
0

今天我遇到了同样的问题......我在我的应用程序中使用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');
        ....
    });

现在一切正常。没问题。

于 2012-06-26T09:48:07.047 回答
0

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

$(selector).removeClass('hasDatepicker').removeAttr('id').datepicker();
于 2013-02-25T17:52:00.583 回答
0

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

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

我从模板中动态克隆部分，无意中包含了 datepicker 一旦调用它就添加的类：

hasDatepicker

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

$(source).clone().appendTo(destination).find(".datepicker").datepicker();
于 2013-04-29T16:22:44.140 回答
0

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

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/

于 2018-01-11T21:33:34.347 回答