Jquery ui 为什么jqueryui'；使用动态DOM的日期选择器中断？

我在这里使用的是动态DOM，并调用了jQueryUIDatePicker来处理具有特定类名的所有输入，在本例中为

.date

它对第一个静态构造非常有效，但当我克隆它时，事件处理程序似乎不想移动。我得到Firebug错误：

inst未定义

---

我尝试研究jQuery的新

live（）

函数，但无法将两者结合起来。有什么想法吗？

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

$（'.date'）。不是（'.hasDatePicker'）.datepicker（）

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

您还应该注意，在新生成的HTML中检查
input.date
会更快，方法是将其设置为上下文，而不是整个页面，因为这将节省时间，因为这是一种更高效的操作。我有一个类似的问题，我在一个页面上有多个表，每个表都有多个日期选择器，另外，单击按钮“AddLine”，它添加了一个带有动态HTML和日期选择器的表行

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

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

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

使用jQuery选择器：

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

我也经历了同样的症状，这是由于有一个包含td的元素，它与输入具有相同的id属性

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



我知道这并不理想，但值得一提的是，datepicker组件似乎依赖于id的唯一性。
我遇到了这个问题。我的情况是，我有另一个元素，其ID与datepicker的输入相同。
使用

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

它正在工作
您需要使用“live”事件使其与动态DOM一起工作。因此，如果datepicker输入的类是“date input”，则以下代码将使其工作：

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

页面上jquery ui库的多个实例也会导致此错误。删除冗余实例对我的案例有效
今天我面临同样的问题。。。我正在应用程序中使用插件。

也使用jquery的默认日期选择器。当我在documentready上调用它们时，我得到的错误是inst未定义

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

因此，我将代码更改为在文档准备就绪之前调用，如下所示：

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

现在一切都很顺利。没有问题。
如果它仍然不起作用，那是因为克隆的id。您可以像这样完全删除日期选择器：

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

我有一个类似的问题，数据选择器在第一次呼叫后无法工作。我在这里找到了我的问题的答案：


我从模板中动态克隆节，无意中包括datepicker调用后添加的类：

hasDatepicker

克隆模板后，我第一次调用了datepicker。然后，我在克隆的每个实例之后添加了一个日期选择器调用：

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

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

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

解决方案：

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

确保您的输入是这样的

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

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

克隆后，还要添加这些行

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

在尝试了这里的许多答案之后，神奇的事情发生了，这对我来说很有用，并且在第一次点击/聚焦时就显示出来了

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

这需要您的输入具有“mostrar\u calendario”类

live适用于JQuery 1.3+对于较新版本，您需要将其调整为“on”

在此处查看更多有关差异的信息
Will，非常感谢！你救了我几个小时的命：）在使用动态DOM时，当我（jquery）用事件克隆表行时，这个解决方案对我没有帮助。我的解决方案是执行$（'.date'）.removeClass（'hasDatepicker'）.datepicker（）；David，您使用的jQuery核心和UI版本是什么？这分别适用于1.3.2和1.7，该解决方案已与其他实现协同工作。不管你的船怎么漂！这帮我无休止地解决了我的问题。我的问题是我在输入中添加了一个名为
hasDatepicker
的类，与jqueryui无关。jQueryUI代码显然会在应用datepicker之前检查这个类，这会使它停止工作！不要将名为
hasDatepicker
的类添加到您想要实际添加日期选择器的输入中！它会导致错误消息
inst is undefined
I有相同的问题-包含输入文本字段的div与文本字段具有相同的ID。删除div上的id修复了这个问题。不过，您并没有销毁日期选择器，这意味着您实际上是在每次触发代码时重新绑定某些内容。因此，您将有两个日期选择器，而不是一个日期选择器（或者它将发生两次-未经测试）。所以，是的，它看起来可能会工作，但不会以最佳方式运行。不幸的是，除了在新元素上设置日期选择器之外，您所做的是将所有内容重新绑定到以前创建的元素，这将占用内存。这在短时间内可能不明显，但如果页面从未重新加载，并且您多次这样做，您会注意到一个差异。注意内存通常被认为是良好的编程实践：）不。每次单击输入时，您都在重新创建一个日期选择器，这是没有性能的。+1对于简单，在其他解决方案出现问题时可以工作。那么我想您就是那种pr
function vincularDatePickers() {
    $('.mostrar_calendario').live('click', function () {
        $(this).datepicker({ showButtonPanel: true, changeMonth: true, changeYear: true, showOn: 'focus' }).focus();
    });
}