将datepicker()放在动态创建的元素上 - JQuery/JQueryUI

Question

我已经动态创建了文本框,我希望每个文本框能够在点击时显示日历.我使用的代码是:

$(".datepicker_recurring_start" ).datepicker();

哪个只能在第一个文本框上工作,即使我的所有文本框都有一个名为datepicker_recurring_start的类.

非常感谢您的帮助!

Answer 1

这是诀窍:

$('body').on('focus',".datepicker_recurring_start", function(){
    $(this).datepicker();
});?

DEMO

该$('...selector..').on('..event..', '...another-selector...', ...callback...);语法的意思是:
一个侦听器添加到...selector..(在body我们的例子)的事件..event..("焦点"在我们的例子).对于匹配选择器的匹配节点的所有后代...another-selector...(.datepicker_recurring_start在我们的示例中),应用事件处理程序...callback...(在我们的示例中为内联函数)

请参阅http://api.jquery.com/on/,特别是有关"委托事件"的部分

Answer 2

对于我来说,jquery工作:

将"身体"改为文件

$(document).on('focus',".datepicker_recurring_start", function(){
    $(this).datepicker();
});

感谢skafandri

注意:确保每个字段的ID不同

Answer 3

skafandri +1的优秀答案

这只是更新以检查hasDatepicker类.

$('body').on('focus',".datepicker", function(){

    if( $(this).hasClass('hasDatepicker') === false )  {
        $(this).datepicker();
    }

});

Answer 4

确保您的.date-picker类元素没有hasDatepicker类.如果是这样,即使尝试重新初始化$myDatepicker.datepicker();也会失败!相反,你需要做...

$myDatepicker.removeClass('hasDatepicker').datepicker();

Answer 5

.datepicker();在动态创建其他文本框元素后,需要再次运行.

我建议在调用的回调方法中这样做,即将元素添加到DOM中.

因此,假设您正在使用JQuery Load方法从源中提取元素并将它们加载到DOM中,您可以执行以下操作:

$('#id_of_div_youre_dynamically_adding_to').load('ajax/get_textbox', function() {
  $(".datepicker_recurring_start" ).datepicker();
});