首页  >  文章  >  web前端  >  如何使用 jQuery 或 jQuery UI 在动态创建的输入字段上启用日期选择器?

如何使用 jQuery 或 jQuery UI 在动态创建的输入字段上启用日期选择器?

Linda Hamilton
Linda Hamilton原创
2024-10-20 20:43:02193浏览

How to Enable Datepickers on Dynamically Created Input Fields Using jQuery or jQuery UI?

将日期选择器附加到动态创建的元素 - JQuery/JQueryUI

问题描述:

An尝试使用以下代码动态创建文本框并为每次点击启用日期选择器会导致只有第一个文本框接收日期选择器。

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

解决方案:

要在所有动态创建的元素上启用日期选择器,代码应使用 jQuery 的 on() 方法使用事件委托,如下所示:

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

说明:

on() 方法向 body 元素添加一个事件侦听器,该元素是所有动态创建的文本框的父元素。当 datepicker_recurring_start 类获得焦点时(例如,当用户单击该类的输入字段时),datepicker() 方法将应用于焦点元素。

此方法使用事件委托,允许附加事件监听从 DOM 动态添加或删除的元素。在本例中,body 元素用作事件侦听器目标,并且 datepicker_recurring_start 类选择器用于标识聚焦时应触发日期选择器的特定元素。

以上是如何使用 jQuery 或 jQuery UI 在动态创建的输入字段上启用日期选择器?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn