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函数？

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

Answer 2

不要在模态点击上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'); });