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

我有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函数?

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

不要在模态点击上hidden.bs.modal绑定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'); });