如何使用jQuery在任意函数调用上触发事件 [英] How to trigger event on arbitrary function call using jQuery

问题描述

我想知道是否有可能在调用任意函数时使用jQuery的bind()触发自定义事件.

I'm wondering if it's possible to use jQuery's bind() to fire a custom event when an arbitrary function is called. Something like,

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

我们正在网站上为Drupal使用Lightbox2插件.

We're using the Lightbox2 plugin for Drupal on a site.

显示灯箱时，我要触发一些自定义代码，这些代码将附加到在灯箱中下载"链接上的点击中.

When the lightbox is displayed, I want to fire some custom code which will attach to clicks on a "download" link in the Lightbox.

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

The Lightbox2 plugin doesn't appear to call $.trigger(), so I have a few options -

• 找到一种绑定到javascript函数调用的方法. (在这种情况下，我相信是Lightbox.end.)
• 使用现有事件，例如$(document).ready，它可能会在灯箱显示中触发(?).
• 扩展现有函数以添加$ .trigger()调用.
• 在检测到单击了触发灯箱的元素后，只需反复锤击myCustom.func()一段时间. (Ewww.)
• __ _ __ _ __ 吗?

• Find a way to bind to javascript function calls. (In this case, Lightbox.end I believe.)
• Use an existing event, eg $(document).ready, which may (?) be fired as part of the lightbox display.
• Extend the existing function to add a $.trigger() call.
• Just hammer myCustom.func() repeatedly for a time after detecting that a lightbox-triggering element has been clicked. (Ewww.)
• ________ ?

解决方案

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

I attempted to simplify my question by using the cmsPlugin.func / myPlugin.func but I think I might have confused myself in doing so. However, I hope that the solutions posted will be generic enough for future readers to use themselves.

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

Thanks Adam and Lucho. I didn't have any luck with Lucho's suggestion, but I suspect that this was my own fault and not Lucho's :)

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

At first I tried Lucho's example code, modifying it to fire Drupal.zipcart.init() when Lightbox.updateNav was executed. This didn't work for me.

我决定对Lightbox.updateNav()进行扩展，因为它是Lightbox2的display方法中一个称为后期的简单函数.

I decided on Lightbox.updateNav() to extend because it was a simple function called late in Lightbox2's display method.

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

My attempt at modifying Lucho's code looked like this, but didn't work -

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

这是我根据亚当的答案最终使用的代码，它允许Drupal的 ZipCart 和 Lightbox2 模块一起很好地播放，并在其中与class ="zipcart"建立链接灯箱将文件正确添加到下载车中.

Here's the code I ended up using based on Adam's answer, which allows Drupal's ZipCart and Lightbox2 modules to play nicely together, making links with class="zipcart" in the lightbox correctly add files to the download cart.

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

推荐答案

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

我想到的最干净的方法是包装Lightbox.updateNav函数并触发自定义事件.

The cleanest way I can think of to accomplish this would be to wrap the Lightbox.updateNav function and fire a custom event.

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

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

#lightbox需要指向可以绑定事件侦听器的灯箱标记.我对LightBox2的API知之甚少，无法告诉您如何正确执行此操作.

#lightbox needs to point to the lightbox markup that you can bind event listeners to. I don't know enough about LightBox2's API to tell you how to do this exactly.

这比简单的包装器功能要好，因为您可以根据需要连接尽可能多的侦听器.

This is better than a simple wrapper function because you can wire up as many listeners as you like.

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

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

Since the lightbox markup is likely created and destroyed dynamically, you would be better off using delegate instead (provided you have access to jQuery 1.4.2). If you can identify where the markup is inserted, attach a delegate to the parent element:

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

这比.live()好得多，因此，我建议您尽可能这样做.

This is much better performance than .live() so I would recommend doing it this way if you can.

这篇关于如何使用jQuery在任意函数调用上触发事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！