Question

我想知道在调用任意函数时是否可以使用jQuery的bind（）来触发自定义事件。像，

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

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

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

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

找到一种绑定到javascript函数调用的方法。（在这种情况下，Lightbox。我相信。）
使用现有的事件，例如$（document）.ready，可以（？）作为灯箱显示的一部分被触发。
扩展现有功能以添加$ .trigger（）调用。
在检测到点击灯箱触发元素后，重复锤击myCustom.func（）一段时间。（EWWW。）
__ _ __ _ __ ？

解决方案

我试图通过使用cmsPlugin.func / myPlugin.func简化我的问题，但我想我可能会混淆自己这样做。但是，我希望所发布的解决方案足够通用，以便将来的读者自己使用。

感谢Adam和Lucho。我对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

~~您无法将事件侦听器绑定到函数。事件是从DOM节点绑定和触发的，因此您需要知道如何选择灯箱的标记。~~ jQuery允许现在执行此操作，但您仍需要一个包装器来触发事件。 < / p>

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

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

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

#lightbox需要指向可以绑定事件侦听器的lightbox标记。我对LightBox2的API知之甚少，无法告诉你如何做到这一点。

这比简单的包装函数更好，因为您可以根据需要连接多个侦听器。

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

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

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

这比.live()表现要好得多，所以我建议你这样做。

Answer 2

cmsPlugin.func = function(myCustom, cmsPlugin) { return function() {
        cmsPlugin.func();
        myCustom.func();
    };
}(myCustom, cmsPlugin);

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

2 个答案: