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

Question

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

这样的功能

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

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

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

下面是截图

Scenario

Answer 1

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

添加

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

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

Answer 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 函数的末尾进行相同的调用。您需要为要动态添加的所有日期时间选择器类执行此操作。

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

Jquery functions not working on dynamically loaded contents(not binding function)

javascript

jquery

datetimepicker

eventhandler