把datepicker（）放在dynamic创build的元素上–JQuery / JQueryUI
我有dynamic创build的文本框，我希望他们每个人都能够单击显示日历。 我使用的代码是：
$(".datepicker_recurring_start" ).datepicker(); 哪些只能在第一个文本框上工作，即使我的所有文本框都有一个名为datepicker_recurring_start的类。
非常感谢您的帮助！
这是一个窍门：
$('body').on('focus',".datepicker_recurring_start", function(){ $(this).datepicker(); });
DEMO
$('...selector..').on('..event..', '...another-selector...', ...callback...); 语法意思是：
添加一个监听...selector.. （在我们的例子中的body ）的事件..event..事件..event.. （在我们的例子中的“焦点”）。 对于与select器匹配的所有匹配节点的后代...another-selector... （在我们的例子中是.datepicker_recurring_start ），应用事件处理程序...callback... （在我们的例子中是内联函数）
请参阅http://api.jquery.com/on/ ，尤其是关于“委派事件”的部分
对于我下面的jQuery工作：
改变“身体”的文件
$(document).on('focus',".datepicker_recurring_start", function(){ $(this).datepicker(); });
感谢skafandri
注意：确保你的ID是不同的每个领域
由skafandri +1优秀的回答
这只是更新来检查hasDatepicker类。
$('body').on('focus',".datepicker", function(){ if( $(this).hasClass('hasDatepicker') === false ) { $(this).datepicker(); } });
确保.date-picker hasDatepicker类的元素没有hasDatepicker类。 如果是这样，甚至尝试用$myDatepicker.datepicker();重新初始化$myDatepicker.datepicker(); 会失败！ 相反，你需要做…
$myDatepicker.removeClass('hasDatepicker').datepicker();
您需要运行.datepicker(); 再次dynamic创build其他文本框元素后。
我build议在调用的callback方法中添加元素到DOM。
所以，假设您使用JQuery Load方法从源代码中提取元素并将其加载到DOM中，您可以执行如下操作：
$('#id_of_div_youre_dynamically_adding_to').load('ajax/get_textbox', function() { $(".datepicker_recurring_start" ).datepicker(); });
dynamic元素的新方法是MutationsObserver ..以下示例使用underscore.js来使用（_.each）函数。
MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver; var observerjQueryPlugins = new MutationObserver(function (repeaterWrapper) { _.each(repeaterWrapper, function (repeaterItem, index) { var jq_nodes = $(repeaterItem.addedNodes); jq_nodes.each(function () { // Date Picker $(this).parents('.current-repeateritem-container').find('.element-datepicker').datepicker({ dateFormat: "dd MM, yy", showAnim: "slideDown", changeMonth: true, numberOfMonths: 1 }); }); }); }); observerjQueryPlugins.observe(document, { childList: true, subtree: true, attributes: false, characterData: false });
没有其他解决scheme为我工作。 在我的应用程序中，我使用jquery将date范围元素添加到文档，然后将datepicker应用于它们。 所以没有一个事件解决scheme出于某种原因。
这是最后的工作：
$(document).on('changeDate',"#elementid", function(){ alert('event fired'); });
希望这可以帮助一个人，因为这使我稍微回头。
您可以在JavaScript函数中添加类.datepicker，以便能够dynamic更改inputtypes
$("#ddlDefault").addClass("datepicker"); $(".datepicker").datetimepicker({ timepicker: false, format: 'd/m/Y', });
我已经修改@skafandri答案，以避免重新应用.datepicker_recurring_start构造函数与.datepicker_recurring_start类的所有input。
这是HTML：
<div id="content"></div> <button id="cmd">add a datepicker</button>
这是JS：
$('#cmd').click(function() { var new_datepicker = $('<input type="text">').datepicker(); $('#content').append('<br>a datepicker ').append(new_datepicker); });
这是一个工作演示
