我在这里使用动态DOM,并将jQuery UI datepicker调用到具有特定类名的所有输入,在本例中为.date
它适用于第一个静态构造,但是当我克隆它时,事件处理程序似乎不想移动。我收到Firebug错误:
inst未定义
我试着研究jQuery的新live()
函数,但无法将两者结合起来。有任何想法吗?
啊,明白了。在我将HTML附加到DOM之后,我在所有输入上运行此操作,我希望弹出一个日期选择器。 Datepicker为它附加的元素添加了一个类,因此我们可以过滤掉现有的输入并仅将其应用于新的输入。
$('.date').not('.hasDatePicker').datepicker();
我希望这可以帮助人们,因为我谷歌搜索了几天,没有找到任何东西!
您还应该注意,通过将其设置为上下文而不是整个页面来检查新生成的HTML中的input.date
会更快,因为这样可以节省时间,因为这样可以提高效率。
今天我遇到了同样的问题...我在我的应用程序中使用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/
如果它仍然不起作用,那是因为克隆如果。您可以像这样完全删除datepicker:
$(selector).removeClass('hasDatepicker').removeAttr('id').datepicker();
我有一个类似的问题,我在一个页面上有多个表,每个表有多个日期选择器,也点击按钮“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"));
}
});
您需要使用“实时”事件才能使其与动态DOM一起使用。因此,如果您的日期选择器输入的类是“日期输入”,则以下代码将使其工作:
$(document).ready(function() {
$('.date-input').live('click', function() {
$(this).datepicker('destroy').datepicker({showOn:'focus'}).focus();
});
});
这可能有点晚了,但上面的所有建议对我都不起作用,我想出了一个简单的解决方案。
首先,导致问题的原因是: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++;
});
并且魔术发生了
使用
$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的输入相同。