将 jQuery 事件处理程序应用于所有相同类型的元素

Question

我希望这是一个简单的问题。我是 jQuery 和 JavaScript 的新手。

我正在尝试编写一个简单的 jQuery 事件处理程序，当我将鼠标悬停在我的页面上时，它会突出显示 li。我试过了：

$( 'li' ).on('mouseover', function(evt) {
   $( evt.target ).effect( 'highlight', {}, 1000 ); 
});

而且它不起作用。它不会产生错误，但没有结果。

但是，如果我尝试类似的操作：

$( document ).on('mouseover', function(evt) {
   $( evt.target ).effect( 'highlight', {}, 1000 ); 
});

我可以通过将鼠标悬停在任何我想要的 DOM 元素上来突出显示它。

我将事件处理程序放在我的 js 文件的末尾，使用显示的第二种方法，即使是动态生成的 DOM 元素也可以毫无问题地突出显示。但是，如果我尝试 select 一个 DOM 标签或什至 class 元素，我将无法产生任何效果。

Answer 1

既然您的目标是动态内容，请尝试像这样委派文档：

$( document ).on('mouseover', 'li', function(evt) {
  $( evt.target ).effect( 'highlight', {}, 1000 ); 
});

您可能需要阅读这篇文章 Event Delegation。

Applying jQuery event handler to all elements of same type