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

Question

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

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

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

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

有什么建议吗？？？

Answer 1

问题

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

看看这个带有动​​态创建按钮的错误示例:

$(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 ，我正在绑定(bind)一个'click'事件不属于创建的$button但是对于创建的按钮以及之前创建的所有 $button，因为我正在使用选择器 'button' 进行绑定(bind)，jQuery 正在选择当前 DOM 中的所有按钮，并绑定(bind) 'click'所有这些的事件监听器。

如果我们在脑海中调试这一点，我们可以理解当我们创建第一个 $button 时，它绑定(bind) 'click'使用'button'监听该按钮选择器，然后它创建了第二个 $button并且再一次绑定(bind) 'click'新创建的 $button 的监听器和上一个一样，因为使用了选择器 'button'正在捕获它们，因此第一个 $button 现在有 2 个点击监听器，而第二个 $button 只有 1 个，然后它创建了第三个也是最后一个 $button，并且再一次 绑定(bind)另一个 'click'新创建的监听器$button ，还有之前的!最后我们得到了第一个 $button与所有 3 个点击监听器一样，第二个 $button最后 2 个点击监听器和第三个 $button与最后一次点击监听器。

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

解决方案1

而不是使用 'click' 绑定(bind)点击监听器选择器，我们可以直接将其绑定(bind)到新创建的$button的引用上:

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

而不是绑定(bind)'click'每个人的听众$button ，我们可以在创建按钮之后绑定(bind)所有这些按钮。由于当时所有 3 个按钮都在 DOM 中，因此我们可以使用通用选择器 'button'将点击监听器绑定(bind)到所有这些:

$(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>