如何添加事件處理程序以在Google日曆頁面上動態添加元素？

Question

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

Jquery adding event listeners to dynamically added elements

Add Event Listener for dynamically created particular element using jquery

而且這裏有一個工作示例：http://jsfiddle.net/DBkV3/

但是，我不能得到這個工作，從Google日曆頁面上的用戶腳本，但我不明白爲什麼不能。

具體而言，我想一個（懸停）監聽器添加到EB-數據，這是在此層次結構：

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

在頁面加載，一切都下降到bubblecontent存在，並且氣泡被隱藏。當某些其他元素被點擊時，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僞數據元素存在的頁面，在這種情況下，它可以作爲預期。太棒了，但我需要一個用戶腳本才能做到這一點。看起來像我可能能夠添加一個點擊處理程序，等待這個元素出現，然後添加一個懸停處理程序 - 但我想有一個更好的方法。

我也嘗試：

$('.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){