Bootstrap 3模态事件(Hidden.Bs.Modal)保持重复

Question

我有6个图像加载到不同的6个不同的模态窗口,它们每个都有一个下一个按钮,还有一个关闭按钮.下一个按钮使用以下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";                            
        });
    });     

但是,问题是:即使我通过单击CLOSE按钮而不是下一个按钮来关闭/隐藏第一个模态('#nextModal12'),也会出现第二个模态.

我相信这是因为即使我没有点击下一个按钮,也会拾取并再次调用hidden.bs.modal函数.如何防止脚本不加选择地拾取hidden.bs.modal函数？

Answer 1

尝试使用.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');                          
    });
});