2 个具有相同 class 问题的日期时间选择器

Question

我有一个模板生成器，它可以创建一个字符串模板，其中包含一些可以稍后修改的变量，例如：“亲爱的乘客，您的航班@@FNumber@@日期已从@@OldDate@@更改到@@NewData@@”。这部分完全没有问题。还有另一个页面填充模板以将文本作为 SMS 发送给用户，因此用户将 select 上一节生成的模板标题，然后我创建将保存变量值的动态控件，对于前面的示例：我将创建 3 个输入以将 @@FNumber@@ 替换为 actual/real 航班号，日期也是如此，这是我为日期字段创建 DateTimePicker 以及更改任何内容时的问题这些动态控件的值，它应该反映在预览输入框中，但我对 DateTimePicker 控件有问题。

当页面包含多个 DateTimePicker 且第一个已更改时。喜欢这张图片 DateTimePicker images 该函数适用于所有其他 DateTimePicker 示例：

    $('.datetimepicker2').on('dp.hide', function () {
     alert('hide')    
     })

此警报出现不止一次
如果我更改了第二个 DateTimePicker 它可以正常工作并且警报只出现一个

有什么建议吗？？？

Answer 1

问题

$('.datetimepicker2') 是否动态附加到页面？如果是这样，是否为每个创建的 $('.datetimepicker2') 添加了 'dp.hide' 事件侦听器？如果是这样，那么我们就以错误的方式绑定了事件侦听器。

看一下这个错误的示例，其中包含动态创建的按钮：

$(document).on('ready', function () {
    // functions 
    function bindButtonClick (i) {
        $('button').on('click', function () {
            alert('Click listener no ' + i);
        });
    }
    
    function appendButtons (numButtons) {
        var $button,
            i;
        
        for (i = 0; i < numButtons; i) {
            $button = $('<button>Button' + ++i + '</button>')
                .appendTo('.main-container');
                
            bindButtonClick(i);
        }
    }
    
    // init
    appendButtons(3);
});

<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- HTML -->
<div class="main-container"></div>

基本上，每次我创建 $button 时，我都会将 'click' 事件绑定到创建的 $button，而不是绑定到创建的按钮和所有以前的按钮$button 已创建，因为我正在与选择器 'button' 进行绑定，jQuery 目前正在选择 DOM 中的所有按钮，并绑定 'click' 事件倾听他们所有人的声音。

如果我们在脑海中对此进行调试，我们可以理解，当我们创建第一个 $button 时，它使用 'button' 选择器将 'click' 侦听器绑定到该按钮，然后它创建了第二个 $button 并且 再一次 ，将 'click' 监听器绑定到新创建的 $button 和前一个监听器，因为使用选择器 'button' 捕获了它们两个，所以第一个 $button 现在有 2 个点击侦听器，而第二个只有 1 个，然后它创建了第三个也是最后一个 $button 并且 再一次 ，将另一个 'click' 侦听器绑定到新创建的 $button 以及之前的侦听器！最后，第一个 $button 包含所有 3 个点击监听器，第二个 $button 包含最后两个点击监听器，第三个 $button 包含最后一个点击监听器。

我们有几个解决方案可以解决这个问题：

解决方案 1

我们可以直接将其绑定到新创建的 $button:

的引用，而不是使用 'click' 选择器绑定点击监听器

bindButtonClick($button, i);

和

function bindButtonClick ($button, i) {
    // the click listener is binded directly to the created $button
    $button.on('click', function () {
        alert('Click listener no ' + i);
    });
}

这是解决方案 1 的工作示例：

$(document).on('ready', function () {
    // functions 
    function bindButtonClick ($button, i) {
        /** 
         * instead of using the general selector $('button'), 
         * we can use the newly created $button reference
         **/
        
        $button.on('click', function () {
            alert('Click listener no ' + i);
        });
    }
    
    function appendButtons (numButtons) {   
        var $button,
            i;
        
        for (i = 0; i < numButtons; i) {
            $button = $('<button>Button' + ++i + '</button>')
                .appendTo('.main-container');
               
            bindButtonClick($button, i);
        }
    }
    
    // init
    appendButtons(3);
});

<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- HTML -->
<div class="main-container"></div>

解决方案 2

我们可以在创建按钮后绑定所有 'click' 监听器，而不是为每个单独的 $button 监听器。由于那时所有 3 个按钮都在 DOM 中，我们可以使用我们的通用选择器 'button' 将点击监听器绑定到所有按钮：

$(document).on('ready', function () { // functions function appendButtons (numButtons) { var $button, i; // create the buttons for (i = 0; i < numButtons; i) { $button = $('<button>Button' + ++i + '</button>') .appendTo('.main-container'); } // bind the clicks after the buttons creation $('button').on('click', function () { alert('Button\'s click listener'); }); } // init appendButtons(3); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="main-container"></div>

2 个具有相同 class 问题的日期时间选择器

2 datetimepicker with same class problems

javascript

datetimepicker