Bootstrap 3 模态事件 (Hidden.Bs.Modal) 不断重复

Question

我有 6 张图片以不同的 6 种不同模式 windows 加载，它们每个都有一个下一步按钮和一个关闭按钮。下一个按钮使用以下 jquery 代码：

    $('#nextModal12').click(function() {
        $('#featuresModal1').modal('hide');
        $('#featuresModal1').on('hidden.bs.modal', function () {
            $('#featuresModal2').modal('show');
            document.getElementById('#featuresModal1').style.display="none";
        });
    });

    $('#nextModal23').click(function() {
        $('#featuresModal2').modal('hide');     
        $('#featuresModal2').on('hidden.bs.modal', function () {
            $('#featuresModal3').modal('show');
            document.getElementById('#featuresModal2').style.display="none";                            
        });
    });

但是，问题是：即使我关闭/隐藏第一个模态（'#nextModal12'）通过点击关闭按钮而不是下一个，出现第二个模态。

我相信这是因为 hidden.bs.modal 函数被拾取并再次调用，即使我没有单击下一步按钮。 如何防止脚本不加选择地获取 hidden.bs.modal 函数？

Answer 1

不要在模态点击时一次又一次绑定hidden.bs.modal，绑定一次就好，

$('#nextModal12').click(function() {
    $('#featuresModal1').modal('hide');
});
 $('#featuresModal1').on('hidden.bs.modal', function () {
    $('#featuresModal2').modal('show');
    $(this).hide();// you can use hide function
});

$('#nextModal23').click(function() {
    $('#featuresModal2').modal('hide');     
});   
$('#featuresModal2').on('hidden.bs.modal', function () {
    $('#featuresModal3').modal('show');
    $(this).hide(); 
});

或者，您可以试试

$('#nextModal12').click(function() {
    $('#featuresModal1').modal('hide'); // hide first
    $('#featuresModal2').modal('show'); // show second
});

$('#nextModal23').click(function() {
    $('#featuresModal2').modal('hide');
    $('#featuresModal3').modal('show');
});

Answer 2

尝试使用 .one 函数代替 .on。当您使用 .on() 时，您的回调将一次又一次地重复，因为您为每次点击再次绑定它；

$('#nextModal12').click(function() {
    $('#featuresModal1').modal('hide');
    $('#featuresModal1').one('hidden.bs.modal', function () {
        $('#featuresModal2').modal('show');
    });
});

$('#nextModal23').click(function() {
    $('#featuresModal2').modal('hide');     
    $('#featuresModal2').one('hidden.bs.modal', function () {
        $('#featuresModal3').modal('show');                          
    });
});

Bootstrap 3 模态事件 (Hidden.Bs.Modal) 不断重复

Bootstrap 3 Modal Event (Hidden.Bs.Modal) Keeps Repeating

javascript

jquery

twitter-bootstrap

bootstrap-modal