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。