关闭引导模式时，按钮事件不会被忽略

Question

我用这种方式打开模式对话框：

    let myModal = new bootstrap.Modal('#myModal', {
        keyboard: false,
        backdrop: 'static'
    });

#myModal

中有一个按钮，我将点击事件绑定到模态

shown

事件中。

$('#myModal').on('shown.bs.modal', event => {
    $('#btnMyButton').on('click', function ()
    {
        console.log('Was clicked!');
    });
});

当我关闭模式时，我将解除事件绑定：

$('#myModal').on('hidden.bs.modal', event => {
    $('#btnMyButton').off('click');
    $('#myModal').off('show.bs.modal');
    $('#myModal').off('shown.bs.modal');
    $('#myModal').off('hidden.bs.modal');
    myModal.dispose();
    console.log('hidden here!');
})

问题是，当我第一次显示模式对话框并按下按钮时，

click

事件被调用一次。

如果我关闭对话框并再次打开它。点击事件被调用两次，以此类推。

如何正确解绑点击事件？为什么

myModal.dispose()

不自动解除事件绑定？

Answer 1

不要在每次模型弹出窗口打开时注册新的处理程序。将处理程序代码放在外面并使用事件委托，如下所示：

 myModal.on('click','#btnMyButton', function (){
        console.log('Was clicked!');
    });