如何觸發使用jQuery的任意函數調用事件

Question

我想知道是否有可能在調用任意函數時使用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（）調用。
• 在檢測到單擊了lightbox-triggering元素後，重複一次錘擊myCustom.func（）一段時間。 （EWWW）
• __ _ __ _ __？

---

解決方案

我試圖通過使用cmsPlugin.func/myPlugin.func簡化我的問題，但我想我可能這樣做混淆了自己。但是，我希望所發佈的解決方案對於未來的讀者來說是足夠通用的。

感謝Adam和Lucho。我沒有與Lucho的建議有任何運氣，但我懷疑這是我自己的錯，而不是Lucho的:)

起初我試過Lucho的示例代碼，修改它以激發Drupal.zipcart.init（）時Lightbox .updateNav被執行。這對我不起作用。

我決定對Lightbox.updateNav（）進行擴展，因爲它是一個簡單的函數，在Lightbox2的顯示方法中稱爲late。

我在修改盧喬的代碼看起來像這樣，但沒有成功嘗試 -

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

這是我結束了使用基於亞當的答案，它允許Drupal的ZipCart和Lightbox2模塊，很好地一起玩的代碼，在Lightbox中使用類=「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現在可以做到這一點，但你仍然需要一個包裝來觸發事件。

我可以想到的最簡潔的方式來完成這個將包裝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()所以我想如果可以的話建議做這種方式。

Answer 2

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