新添加的對象不會響應頁面加載的jQuery事件

Question

我在這裏使用了Backbone，但我也遇到了非Backbone網站的這個問題。

本質上，我的問題是我在一個JavaScript文件base.js中定義了一些'全局'jquery函數。然後，我加載新的元素，並使用Backbone，AJAX或任何您喜歡的異步調用將它們附加到頁面中。這很好，除了新的對象似乎沒有鏈接到我在pageload上聲明的jQuery事件。 （對不起，這裏的深入淺出 - 通常我在正確的寫法是新手）

例如，假設我宣佈在裝上頁面加載JS文件：

$('.element').hover(function(){alert('hi world')}); 

但後來我追加一個新元素在頁面加載之後，這個懸停不起作用。

任何人都可以解釋：

1. 這是爲什麼呢？
2. 我是否可以強制使用新的附加元素來處理已經聲明的當前事件？

我懷疑（2）可能不可能（我必須在附加後重寫事件），但有興趣知道是否有某種解決方案。

Answer 1

這是爲什麼？

由於執行事件綁定代碼的時候，沒有在DOM中已經存在的元素不會受到影響（他們怎麼可能？他們還不存在！）「正常」事件綁定的方法（例如.click()或.change()）會將事件處理程序函數的副本附加到匹配集合中的每個元素。

我可以強制一個新的附加元素來處理/監聽已經聲明的當前事件嗎？

確實可以通過將事件處理程序的代理更高一些的DOM樹。由於大多數DOM事件都會從它們所源自的元素中冒泡起來，所以這很有效。使用jQuery，您可以使用.on()（jQuery的1.7+ - 對舊版本使用.delegate()代替）方法來做到這一點：

$("#someCommonAncestor").on("someEvent", ".element", function() { 
    // Do stuff 
}); 

在其上調用.on()必須在DOM當時存在的元素的代碼運行。當事件冒出足夠的空間達到#someCommonAncestor時，jQuery將檢查目標元素是否與您傳遞給.on()的選擇器相匹配。如果有，它將執行事件處理程序。如果沒有，該事件將繼續冒泡到文檔的根部，而不會觸發任何處理程序。