Question

我有一个模板生成器，它可以创建一个带有一些变量的字符串模板，这些变量可以在以后修改，例如：“亲爱的乘客，你的航班@@ FNumber @@日期已从@@ OldDate @@更改为@ @新数据@@”。这部分完全没有问题。还有另一个页面填充模板以将文本作为SMS发送给用户，因此用户将选择由上一部分生成的模板标题，然后我创建动态控件，它将保存变量值，对于前面的示例：我将创建3个输入来替换@@ FNumber @@与实际/实际航班号，以及相同的日期，这是我为日期字段创建DateTimePicker的问题，当我更改这些动态控件的任何值时，它应该反映在预览输入框中，但是我遇到了DateTimePicker控件的问题。

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

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

此警报出现多次如果我更改了第二个DateTimePicker它正常工作，警报只出现一个

任何建议???

Answer 1

<强>问题

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

使用动态创建的按钮查看此错误的示例：

＆＃13;

$(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);
});

＆＃13;

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

＆＃13;

基本上发生的事情是，每次创建$button时，我都会将'click'事件绑定到创建的$button，而不是绑定到创建的按钮因为我正在与选择器'button'进行绑定，所以之前创建了所有以前的$按钮，jQuery正在选择DOM中的所有按钮，并绑定{{1}所有这些事件的侦听器。

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

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

解决方案1 

我们可以使用$button选择器绑定点击侦听器，而不是直接将其绑定到新创建的$button的引用：

$button

和

'click'

以下是解决方案1 ：

的工作示例

＆＃13;

$button

＆＃13;

bindButtonClick($button, i);

＆＃13;

解决方案2

我们可以在创建按钮之后绑定所有绑定function bindButtonClick ($button, i) { // the click listener is binded directly to the created $button $button.on('click', function () { alert('Click listener no ' + i); }); }每个人$(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); });的监听器。由于当时所有3个按钮都在DOM中，我们可以使用通用选择器 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="main-container"></div>将点击侦听器绑定到所有按钮：

＆＃13;
＆＃13;
'click'
＆＃13;
$button
＆＃13;
＆＃13;
＆＃13;

2具有相同类问题的datetimepicker

1 个答案: