Bootstrap 3模态事件(Hidden.Bs.Modal)不断重复 [英] Bootstrap 3 Modal Event (Hidden.Bs.Modal) Keeps Repeating

问题描述

我有6张图片分别在6个不同的模态窗口中加载，并且每个图片中都有一个下一个按钮和一个关闭按钮.下一个按钮可与以下jquery代码一起使用:

I have 6 images that load in different 6 different modal windows and they each have a next button and also a close button in them. The next button works with the following jquery code:

    $('#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')模态出现.

However, the problem is: Even when I close/hide the first modal ('#nextModal12') by clicking the CLOSE button instead of the next, the second modal appears.

我相信这是因为即使我没有单击下一步按钮，也会隐藏并再次调用hidden.bs.modal函数. 如何防止脚本随意拾取hidden.bs.modal函数?

I believe this is because the hidden.bs.modal function is picked up and called again even when I'm not clicking the next button. How do I prevent the script from picking up the hidden.bs.modal function indiscriminately?

推荐答案

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

Try use .one function instead of .on. When you use .on() your callback would be repeating again and again, beacuse you bind it again for each click;

$('#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)不断重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！