2

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

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

我们在一个站点上使用 Drupal 的 Lightbox2 插件。

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

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

  • 找到一种绑定到 javascript 函数调用的方法。（在这种情况下，我相信 Lightbox.end。）
  • 使用现有事件，例如 $(document).ready，它可能 (?) 作为灯箱显示的一部分被触发。
  • 扩展现有函数以添加 $.trigger() 调用。
  • 在检测到触发灯箱的元素已被单击后，只需反复敲击 myCustom.func() 一段时间。（万维网。）
  • _ _ __ _ __ ?

解决方案

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

感谢亚当和卢乔。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(); });
4

2 回答 2

3

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

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

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

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

#lightbox需要指向可以将事件侦听器绑定到的灯箱标记。我对 LightBox2 的 API 了解不多，无法准确地告诉您如何做到这一点。

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

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

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

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

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

于 2010-10-27T20:04:26.117 回答
0 
cmsPlugin.func = function(myCustom, cmsPlugin) { return function() {
        cmsPlugin.func();
        myCustom.func();
    };
}(myCustom, cmsPlugin);
于 2010-10-27T19:58:57.213 回答