在更改时，即使是动态插入的输入标记上的日期选择器的处理程序也不会;不起作用

On change even handlers for a datepicker on a dynamically inserted input tag doesn't work?

本文关键字：处理 选择器 日期 程序 不起作用 即使是 动态 输入 插入      更新时间：2023-09-26

我有两个动态插入的标签，ID分别为从拾取和拾取到。我正在使用这个插件：http://www.eyecon.ro/bootstrap-datepicker/单击日期选择器时调用它，并在日期更改时执行一些任务。过去，当输入标签不是动态插入的，但必须更改应用程序行为时，它就可以工作了，现在，输入标签是动态插入的。下面的代码不再有效：

var picker = $('#pick-from, #pick-to').datepicker().on('changeDate', function(ev) {
        picker.datepicker('hide');
        var today   = new Date(ev.date),
            dd      = today.getDate(),
            mm      = today.getMonth() + 1,
            yyyy    = today.getFullYear();
        if (dd < 10) dd = '0' + dd;
        if (mm < 10) mm = '0' + mm;
        var inputVal    = mm + '/' + dd + '/' + yyyy,
            target      = ev.currentTarget.id;
        // All my other code goes here.
    });

我甚至尝试过：

$(document).on('click', '#pick-from, #pick-to', function() {
    var picker = $(this).datepicker().on('changeDate', function(ev) {
        picker.datepicker('hide');
        var today   = new Date(ev.date),
            dd      = today.getDate(),
            mm      = today.getMonth() + 1,
            yyyy    = today.getFullYear();
        if (dd < 10) dd = '0' + dd;
        if (mm < 10) mm = '0' + mm;
        var inputVal    = mm + '/' + dd + '/' + yyyy,
            target      = ev.currentTarget.id;
        // A lot of other code comes here.
    }});

第二个代码片段有效，但并不一致。当我点击两个输入框并第二次点击其中一个时，它就起作用了。我该如何解决这个问题？

您可以将事件应用于容器元素并委托它：

$("#myContainer").on('changeDate', '#pick-from, #pick-to', function() { ... });

http://api.jquery.com/on/

.on( events [, selector ] [, data ], handler )

当提供选择器时，事件处理程序被称为委派。当事件直接发生在绑定元素上时，不调用处理程序，而仅针对与选择器匹配的子体（内部元素）调用处理程序。jQuery将事件从事件目标标记到附加处理程序的元素（即从最里面到最外面的元素），并为与选择器匹配的路径上的任何元素运行处理程序。

相关文章：