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

Question

我有一个模板生成器，它可以创建一个带有一些变量的字符串模板，这些变量可以稍后修改，例如：“亲爱的乘客，您的航班@@FNumber@@ 日期已从@@OldDate@@ 更改为@ @新数据@@”。这部分完全没有问题。 还有另一个页面填充模板以将文本作为 SMS 发送给用户，因此用户将选择上一节生成的模板标题，然后我创建将保存变量值的动态控件，对于前面的示例：我将创建 3 个输入以将 @@FNumber@@ 替换为实际/真实航班号，并且与日期相同，这是我为日期字段创建 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 个点击监听器，而第 2 个只有 1 个，然后它创建了第 3 个也是最后一个 $button 并且，再次，将另一个 'click' 监听器绑定到新创建的 $button 和之前的监听器也！最后，我们有第一个 $button 与所有 3 个点击侦听器，第二个 $button 与最后 2 个点击侦听器和第三个 $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 绑定一个'click' 侦听器。由于那时所有 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);
});

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

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