javascript - 如何使用 jQuery 在任意函数调用上触发事件

Question

我想知道是否可以使用 jQuery 的 bind() 在调用任意函数时触发自定义事件。类似这样的东西，

/* when cmsPlugin.func() is called, fire myCustom.func() too */
$.bind( cmsPlugin.func, myCustom.func );

我们正在网站上使用适用于 Drupal 的 Lightbox2 插件。

当显示灯箱时，我想触发一些自定义代码，这些代码将附加到灯箱中“下载”链接的点击。

Lightbox2 插件似乎没有调用 $.trigger()，所以我有几个选项 -

• 找到一种绑定(bind) JavaScript 函数调用的方法。 (在这种情况下，我相信是 Lightbox.end。)
• 使用现有事件，例如 $(document).ready，它可能(？)作为灯箱显示的一部分被触发。
• 扩展现有函数以添加 $.trigger() 调用。
• 检测到灯箱触发元素被点击后，只需重复敲击 myCustom.func() 一段时间即可。 (呃www。)
• ________ ?

---

解决方案

我试图通过使用 cmsPlugin.func/myPlugin.func 来简化我的问题，但我认为这样做可能会让自己感到困惑。不过，我希望发布的解决方案足够通用，供 future 的读者自己使用。

谢谢亚当和卢乔。我对 Lucho 的建议没有任何运气，但我怀疑这是我自己的错，而不是 Lucho 的错:)

首先我尝试了 Lucho 的示例代码，将其修改为在执行 Lightbox.updateNav 时触发 Drupal.zipcart.init()。这对我不起作用。

我决定扩展 Lightbox.updateNav()，因为它是一个在 Lightbox2 的显示方法后期调用的简单函数。

我尝试修改 Lucho 的代码，看起来像这样，但没有成功 -

// NOT THE RIGHT SOLUTION (for me)
Lightbox.updateNav = function(_dz, _lb) { return function() {
        _lb.updateNav();
        _dz.init();
    };
}(Drupal.zipcart, Lightbox);

这是我最终根据 Adam 的答案使用的代码，它允许 Drupal 的 ZipCart和 Lightbox2模块可以很好地协同工作，使灯箱中带有 class="zipcart"的链接正确地将文件添加到下载车。

(function(){
  var _updateNav = Lightbox.updateNav;
  Lightbox.updateNav = function () {
    $(document).bind('lightbox.updateNav', function() {
      Drupal.zipcart.init();
    });
    $("#lightbox").trigger('lightbox.updateNav');
    _updateNav.apply(this, arguments);
  }
})();
$(document).bind('lightbox.updateNav', function () { Drupal.zipcart.init(); });

Answer 1

您无法将事件监听器绑定(bind)到函数。事件是从 DOM 节点绑定(bind)和触发的，因此您需要知道如何选择灯箱的标记。 jQuery 现在允许这样做，但您仍然需要一个包装器来触发事件。

我能想到的实现此目的的最简洁方法是包装 Lightbox.updateNav 函数并触发自定义事件。

(function(){
  var _updateNav = Lightbox.updateNav;

  Lightbox.updateNav = function () {
    $("#lightbox").trigger('lightbox.updateNav');
    _updateNav.apply(this, arguments);
  }
})();

#lightbox 需要指向您可以绑定(bind)事件监听器的灯箱标记。我对 LightBox2 的 API 不太了解，无法告诉您具体如何执行此操作。

这比简单的包装函数更好，因为您可以连接任意数量的监听器。

$("#lightbox").bind('lightbox.updateNav', function() {})

由于灯箱标记可能是动态创建和销毁的，因此您最好使用 delegate 代替(前提是您可以访问 jQuery 1.4.2)。如果您可以识别插入标记的位置，请将委托(delegate)附加到父元素:

$('#lightbox-parent').delegate('#lightbox', 'lightbox.updateNav', function() {})

这比 .live() 的性能要好得多，所以如果可以的话，我建议您这样做。