javascript - jQuery - 在 Fancybox 中触发点击

Question

我有一个页面会弹出 fancybox使用

$('#showpopup').fancybox().trigger('click');

当用户浏览页面时，这可能会被触发多次(不是一次)弹出。

在弹出窗口中有一个按钮，单击它会触发一个 Action

$('#mybutton').click(function(){

   $('#otherbutton').trigger('click');

});

当 fancybox 弹出窗口第一次显示时，我单击 #mybutton，#otherbutton 将触发一次。

当 fancybox 弹出窗口第二次显示时，我单击 #mybutton 和 #otherbutton 将触发两次。

当 fancybox 弹出窗口第三次显示时，我单击 #mybutton 和 #otherbutton 将触发三次...等等。

我怎样才能用 fancybox 解决这个问题，让 otherbutton 只触发一次？

Answer 1

听起来您正在为 Fancybox 事件(onStart、onComplete)中的 #mybutton 元素绑定(bind) click 事件处理程序 等)。

解决这个问题的两种方法是:

1. 在 onClosed 或 onCleanup 事件中，您可以取消绑定(bind) #mybutton 元素的 click 事件处理程序: $('#mybutton').unbind('click');.这样一来，它们就不会堆积起来并在单击一次时触发多次。
2. 您可以将 $('#mybutton').click(function(){$('#otherbutton').trigger('click');}); 移到任何 Fancybox 事件处理程序之外(如果在显示 Fancybox 之前按钮不存在于 DOM 中，那么您可以使用 .delegate() 将 click 事件处理程序绑定(bind)到此按钮)。 $(document).delegate('#mybutton', 'click', function () {...})(请注意，您可以将 document 更改为任何根元素绑定(bind)时存在于 DOM 中)。

文档:

• .unbind(): http://api.jquery.com/unbind
• .delegate: http://api.jquery.com/delegate

我还注意到您链接到旧版本的 Fancybox，如果您使用的是 1.x，那么我建议更改为 2.0:http://fancyapps.com/fancybox/