如何將事件處理程序添加到Google日歷頁面上動態添加的元素？

Question

這與其他幾個問題非常相似：

jQuery將事件偵聽器添加到動態添加的元素

使用jquery為動態創建的特定元素添加事件監聽器

這里有一個有效的示例： http : //jsfiddle.net/DBkV3/

但是，我無法通過Google日歷頁面上的用戶腳本來執行此操作，我也不知道為什么不這樣做。

具體來說，我想在eb-data中添加一個（懸停的）偵聽器，它在此層次結構中：

body > calmaster > bubble > bubblemain > bubblecontent > eb-root > eb-data

在頁面加載時，存在所有氣泡內容，並且氣泡被隱藏。 單擊某些其他元素時，將創建/填充eb-data。

我正在嘗試在用戶腳本和控制台中向eb-data添加一個懸停偵聽器。 例如，我嘗試了許多不同的操作（在控制台中嘗試了所有這些操作）：

$('.bubblecontent').on('hover', '.eb-root', function(e) {console.log('hover');})
$('.bubblemain').on('hover', '.eb-root', function(e) {console.log('hover');})
$('.bubble').on('hover', '.eb-root', function(e) {console.log('hover');})
$('body').on('hover', '.eb-root', function(e) {console.log('hover');})
$('.bubblecontent').on('hover', '.eb-main', function(e) {console.log('hover');})
...
$('body').on('hover', '*', function(e) {console.log('hover');})

等等

這些都不產生控制台輸出或錯誤。 另一種方法：

eb=$('.eb-data');
eb.hover(function(e) {console.log('hover');}

這將產生以下結果：

Uncaught TypeError: eb.hover is not a function

而且它提供了錯誤位置，就像先前存在的js文件之一一樣-我不明白這里發生了什么。

然后：

$('.eb-data').hover(function(e) {console.log('hover');})

除非頁面上存在.eb-data元素， 否則它不會執行任何操作，在這種情況下，它會按預期工作。 很好，但是我需要一個用戶腳本才能執行此操作。 似乎我可以添加一個等待該元素出現的單擊處理程序，然后向其添加一個懸停處理程序-但我認為有更好的方法。

我也嘗試過：

$('.bubblecontent').on('hover', '.eb-data', function(e) {console.log('hover');})

盡管它確實會在控制台上產生輸出-似乎僅包含bubblecontent元素的數組，但它似乎並未添加懸停偵聽器。 這促使我嘗試索引數組：

$('.bubblecontent')[0].on('hover', '.eb-data', function(e) {console.log('hover');})

但這給了我一個與以前類似的錯誤：

Uncaught TypeError: $(...)[0].on is not a function

所以我沒主意了。 我要去哪里錯了？

編輯：請注意，這些只是當您單擊Google日歷中的事件時出現的“彈出窗口”的元素-如果您擁有Google帳戶，則可以在控制台中自己測試代碼。

Answer 1

$(document).on('hover',".eb-main",function(e){