Question

我已经做了一个小提琴，说明了我目前面临的问题。因此，每次关闭并打开模态时，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();
});

Answer 1

或者你可以试试这个：

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

Answer 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（）相同，但处理程序除外第一次调用后未绑定

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

Answer 4

以下功能用于我的应用程序中的所有对话框。

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

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

Answer 5

那是因为你正在为事件附加几个事件处理程序，第一次点击你正在听一次，第二次点击两次，依此类推，在openTestModal函数的上下文之外听取事件。

Answer 6

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

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

Answer 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');

当你关闭并重新打开模态时，shown.bs.modal会多次触发

7 个答案: