Jquery 函数不适用于动态加载的内容（不是绑定函数）答案

【问题标题】：Jquery functions not working on dynamically loaded contents(not binding function)Jquery 函数不适用于动态加载的内容（不是绑定函数）
【发布时间】：2023-03-29 09:10:01
【问题描述】：

我在 javascript 中有一个问题，我有一个带有添加和删除按钮的表单，单击它们时，某些表单字段会随着按钮单击而重复和删除，在这些字段中，我也有 datetimepicker，我希望它也应该在生成的字段中工作，但它不起作用，尽管我使用类而不是 Id 来为它们提供类似的功能

    $(function () {
    var now = new Date();
    $('.time_in').datetimepicker({
        defaultDate: now,
        format: 'HH:mm'
    });
});

但它只在第一个字段而不是所有字段中工作，我在更改 datetimepicker 的值后还附加了一些事件处理程序，但我没有遇到问题，我知道该怎么做。

我只是想问一下如何使用 datetimepicker 赋予函数或初始化字段..

下面是截图

Scenario

【问题讨论】：

把你的代码放在小提琴上并分享网址
显示add 和delete 功能的代码
$('.time_in') 不像 CSS 那样“实时”。它只包含调用时已经存在的元素。
我已将代码放在小提琴上，但我不知道为什么它不起作用...这是我第一次将代码放在小提琴上这是链接jsfiddle.net/388vtbhr
@qtuan 是的，这也是我担心的问题，解决这个问题的方法是什么。

标签： javascript jquery datetimepicker eventhandler

【解决方案1】：

您好，因为您正在动态创建文本框，您应该使用事件委托，使用 jQuery 的 on() 方法（需要 jQuery 版本 1.7x+）。

添加

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

这是一个小演示http://jsfiddle.net/SJ7bJ/1013/

【讨论】：

是的，它可以工作，但是有没有办法像第一个一样预填充文本框？
@Manish 我已经更新了小提琴以预加载带有日期的文本框...请检查jsfiddle.net/SJ7bJ/1015

【解决方案2】：

添加新元素后，您需要调用代码在每个字段上添加日期时间选择器。考虑重构代码以将 dateptimepicker 分配到一个单独的函数中，该函数可以从 init 和 #add 函数中调用。

$(function () {
    add_time_in_datetimepicker();
});

function add_time_in_datetimepicker() {
    var now = new Date();
    $('.time_in').datetimepicker({
        defaultDate: now,
        format: 'HH:mm'
    });
});

然后在#add 函数的末尾，进行同样的调用。您需要为要动态添加的所有 datetimepicker 类执行此操作。

【讨论】：