jQuery .on不會在動態添加的元素上工作

Question

我正在測試一些功能，我試圖讓一旦我將鼠標懸停在特定元素上（在本例中爲任何鏈接），它將在控制檯內輸出內容。

我已經看過這個答案 - >here它說：「你可以一次定義功能，它會執行任何動態添加元素」

所以我這個js腳本，但一旦元件裝入動態的，即喜歡youtube視頻，但是一旦我懸停在新添加的元素上，這個腳本將不起作用，控制檯內沒有輸出。

$("a").on({ 
    click: function() { 
    console.log('clicked'); 
    }, mouseenter: function() { 
    console.log('enter'); 
    }, mouseleave: function() { 
    console.log('left'); 
    } 
}); 

我在這裏錯過了什麼嗎？

Answer 1

綁定元素的方式用於將多個事件處理程序綁定到相同的元素。如果他們動態添加，那麼你將不得不求助於事件委託。您將在何處將事件綁定到事件綁定時存在的父元素。

$("body").on('click', 'a', function() { 
    console.log('clicked'); 
}); 

$("body").on('mouseenter', 'a', function() { 
    console.log('enter'); 
}); 

$("body").on('mouseleave', 'a', function() { 
    console.log('left'); 
}); 

你可以與任何其他最接近父母a這是目前在事件綁定時更換body。