当您关闭并重新打开模式时，showed.bs.modal 会多次触发

Posted 2023-05-08

【中文标题】当您关闭并重新打开模式时，showed.bs.modal 会多次触发

【英文标题】：shown.bs.modal fires multiple times when you close and reopen modal

【发布时间】：2014-01-27 17:42:55

【问题描述】：

我做了一个小提琴来说明我目前面临的问题。所以每次我关闭并打开一个模式时，shown.bs.modal 也会触发多次。在这个小提琴中，每次关闭和打开模式时，警报的数量也会增加（当它应该只触发一次时）。 http://jsfiddle.net/j36h2/1/

function openTestModal()
    $('#testModal').modal(
        keyboard: false,
        backdrop: 'static'
    );

    $('#testModal').on('shown.bs.modal', function (e) 
        alert('');
    );


$('.testButton').click(function()
    openTestModal();
);

【问题讨论】：

将你的on 监听器放在函数之外。您在这里的基本意思是，每次单击按钮时，您都在收听模态。你只需要听一次

@ashley 是的，你是对的 :)。我的错。

@pewpewlasers 归功于这个名字 ;)

jQuery click events firing multiple times的可能重复

【参考方案1】：

或者你可以试试这个：

$('#testModal').on('shown.bs.modal', function (e) 
 alert('');
 $(this).off('shown.bs.modal');
);

【讨论】：

这是我的首选方法。

感谢您的解决方案

【参考方案2】：

@Put12co22mer2 接受的答案是正确的。但是，有时您希望在打开模式时重新绑定事件。假设您有一些应该使用的选项。

function openTestModal(options)
    $('#testModal').modal(
        keyboard: false,
        backdrop: 'static'
    );

    $('#testModal').one('shown.bs.modal', function (e) 
        // do something with options
        alert(options.foo);
    );


$('.testButton').click(function()
    openTestModal( foo: bar);
);

然后您可以使用one 代替on。结果将与取消绑定相同，但在我看来更清晰。

http://api.jquery.com/one/

.one() 方法与 .on() 相同，只是处理程序是 第一次调用后未绑定

【讨论】：

使用 one() 对我来说是比 on()+off() 更清洁的解决方案，因为我的事件绑定器在一个递归调用的方法中。

【参考方案3】：

您需要从点击事件中提取警报功能：

http://jsfiddle.net/SyCNj/2/

提取：

function openTestModal()
    $('#testModal').modal(
        keyboard: false,
        backdrop: 'static'
    );


$('#testModal').on('shown.bs.modal', function (e) 
   alert('');
);

$('.testButton').click(function()
    openTestModal();
);

【讨论】：

还有jquery off函数可以做到这一点，不过它只是个绷带，你的问题就在这里，你的alert函数写在这里....

为什么是绷带？它是一个可用的功能，为什么不使用它？

【参考方案4】：

下面的函数用于我的应用程序中的所有对话框。

每次都会调用不同的回调来执行。对我来说最简单的解决方案就是在添加新事件处理程序之前删除事件处理程序。

function messageBox(action,...)                
    $("#modal-btn-ok").off("click");
    $("#modal-btn-ok").on("click", function(e) 
        action(e);
    ); 

【讨论】：

这个答案将解决有关双击模态的问题。还是谢谢！

这个解决方案是最简单的。时间。

【参考方案5】：

那是因为您为事件附加了多个事件处理程序，第一次单击时您正在侦听一次，第二次单击两次等等，在 openTestModal 函数的上下文之外侦听事件。

【参考方案6】：

定义变量并将其值设置为1；喜欢：

function openTestModal()
                $('#testModal').modal(
                    keyboard: false,
                    backdrop: 'static'
                );
               var e=1;
                $('#testModal').on('shown.bs.modal', function (e) 
                    alert('');
                    e=0;
                );
            

【参考方案7】：

您可以尝试如下：（Bootstrap v3.3.6）

$('#dialog')
.modal(show: false)
.on('hide.bs.modal', function () 
    //..................
).on('shown.bs.modal', function (event) 
    //..................                  
).on('hidden.bs.modal', function () 
    $("#dialog").off();
);
$('#dialog').modal('show');