如何使用jQuery將事件處理程序動態移動到不同的元素？

jQuery插件使代碼更加可重用。如何使用jQuery將事件處理程序動態移動到不同的元素？

我以前做過一個插件，可以打開一個動態創建的燈箱，從IMG標籤的屬性中提取信息。該插件爲圖像註冊了一個單擊事件處理程序。

我最近做了另一個插件，我想用這些圖片動態添加疊加。我遇到的問題是覆蓋層完美地完成了它的工作，完全覆蓋了圖像（並覆蓋了在圖像上運行單擊事件的能力）。

我一直在試圖找到一種方法將事件處理程序從IMG複製到新的疊加層。我發現這給了我一些見識了以下信息：http://ejohn.org/apps/workshop/adv-talk/#9

使用上面的代碼，我能夠檢索分配給特定的IMG元素的數據「事件」性質的事件，並將其分配到覆蓋元素的數據「事件」屬性。不幸的是，似乎只要重複進行 - 當點擊疊加元素時，事件不會被觸發。

示例代碼（沒有覆蓋，這個代碼只是作爲一個例子）：

HTML：

<div class="object1">This is the first object.</div> 
<div class="object2">This is the 2nd object.</div>

的JavaScript：

$(document).ready(function(){ 
    $('.object1').click(function(){ 
     alert('I was clicked.'); 
    }); 

    //using 2 params in data() uses a key/value pair 
    $('.object2').data('events', $('.object1').data('events')); 
    //still no "click" event handler on '.object2', ... 
    // ... although the information is stored on the element's data store 
});

我希望這個事件本身也會被註冊，但這似乎並非如此。有沒有辦法做到這一點？

來源

2010-11-12 BrendonKoz

我剛剛想出了這個插件。看起來像它做你打算做的事情。 http://plugins.jquery.com/project/copyEvents

來源

2010-11-12 21:16:10 code90

雖然它看起來好像這會工作，但我寧願不添加依賴到我的插件。但是，我可以查看插件的來源，並能夠從中制定動態解決方案。由於你的鏈接使我找到了解決方案，所以我會給你答案。謝謝，code90！ – BrendonKoz 2010-11-12 22:14:20

此鏈接已損壞。此外，插件將不會與現代版本的jQuery（1.8+）一起使用，因爲事件存儲方式不同，除非已更新。 – 2015-03-17 16:19:28

試試這個（View demo）

$(document).ready(function(){ 
    $('.object1').click(function(){ 
     alert('I was clicked.'); 
    }); 

    $('.object2').click($('.object1').data('events').click[0]); 
});

來源

2010-11-12 21:08:52

問題是，我想確保這個新的插件可以採取所有功能，無論情況如何。如果發生鼠標事件，這不會是一個足夠動態的解決方案。我曾經想過（應該在我原來的帖子中提到它，對不起），但它沒有涵蓋足夠的可能性。 – BrendonKoz 2010-11-12 22:06:35

此代碼不適用於新版本的jQuery（1.8+），因爲存儲事件的方式已更改。這是一個可以在現代版本中工作的代碼片段，它可以處理所有事件類型，而不僅僅是點擊。 http://stackoverflow.com/a/29151280/2180479 – 2015-03-28 15:40:29

如何使用jQuery將事件處理程序動態移動到不同的元素？

回答

相關問題