Question

如何将datepicker附加到动态注入的元素？

我不能简单地做出类似的事情：

$(function(){
  $('.date').datepicker();
})

因为在dom完成加载后，没有类型为'.date'的元素

我认为live()也不会在这里工作

我在firebug $(".date").datepicker is not a function

中收到此错误

修改：
这就是注入元素的方式

$('#typeId').change(function(){
   $(this).nextAll().remove();
   $(this).parent().append('<input type="hidden" name ="view_type" value="by_range"> <span>Start:</span> <input type="text" name="start_date" class="date"> <span>End:</span> <input type="text" name="end_date" class="date"> <input type="submit" value="Submit">');
})

Answer 1

为什么不尝试创建一个在插入动态注入元素时调用的回调函数。回调可以为指定的选择器设置datepicker。

Answer 2

如果您知道插入元素的时间，您可以在此之后立即执行.datepicker（）。

Answer 3

前段时间我使用Duplicate / Remove做了类似的东西，你可以在这里找到一个jQuery插件：http://www.trovster.com/lab/plugins/duplicate-remove/

在jquery.duplicate-remove.js的第60行之后：

$(this).find('input').focus();

您可以实例化jQuery datepicker：

$(this).find('.datepicker').datepicker();

然后，只需正常调用Duplicate / Remove。你还需要一个“初始”的datepicker实例作为选择器的第一个元素。

Answer 4

Live Query确实解决了我的问题

$('.date').livequery(){
  $(this).datepicker()
}

Answer 5

尝试将代码修改为：

$('#typeId').change(function(){
   $(this).nextAll().remove();
   $(this).parent().append($('<input type="hidden" name ="view_type" value="by_range"> <span>Start:</span> <input type="text" name="start_date" class="date"> <span>End:</span> <input type="text" name="end_date" class="date"> <input type="submit" value="Submit">').find('.date').datepicker());
})

将jquery datepicker附加到注入的元素

5 个答案: