如何使用 jQuery 在动态元素上实现日期选择器？

在动态创建的元素上实现 jQuery datepicker()

许多 Web 应用程序需要使用动态元素，例如文本框，可以根据需要添加或删除这些元素。当向这些动态元素添加日期选择器时，必须了解如何有效地处理这种情况。

挑战：无效的 datepicker() 实现

假设我们动态创建了多个文本框，每个文本框具有公共类“datepicker_recurring_start”。目标是使每个文本框在单击时显示日历。但是，使用以下代码仅将日期选择器功能应用于第一个文本框：

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

解决方案：委派事件委托

为了解决此问题，我们利用事件委托的力量，它允许我们将事件处理程序附加到静态父元素，例如文档的正文。以下代码演示了这种方法：

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

在此代码中：

• $('body') 选择文档的正文作为静态父元素。
• on('focus': 为 'focus' 事件注册一个事件侦听器。
• ".datepicker_recurring_start"：指定事件侦听器应应用于具有类“datepicker_recurring_start”的正文的后代。
• function() {...}：定义初始化当前元素的日期选择器实例的事件处理程序。

此技术有效地将日期选择器功能附加到所有当前和未来的具有“datepicker_recurring_start”类的元素，确保所有动态创建的文本框都具有所需的行为。

以上是如何使用 jQuery 在动态元素上实现日期选择器？的详细内容。更多信息请关注PHP中文网其他相关文章！