javascript - 动态加载 时以 "this"为目标

Question

这个问题已经有答案了:

How do I attach events to dynamic HTML elements with jQuery? [duplicate] (8 个回答)

How to make jQuery 1.7 .on() hover? (2 个回答)

已关闭 9 年前。

我有一个 div，其中正在动态加载无序列表。首先，我要说的是，当 ul 被硬编码时，它工作得很好，当加载新的 ul 时就会出现问题。这是我的 JavaScript:

$('#products ul li').hover(function(){
   $(this).find(".productDesc").fadeToggle("slow");
});

动态加载到<div id='products'></div>的代码的html结构如下:

<ul id='category1'> 
  <li>
     <p class='productDesc'>description 1 here</p>
  </li>

  <li>
     <p class='productDesc'>description 2 here</p>
  </li>
</ul>

问题出在“this”。当新的 UL 动态加载时，“this”似乎不再指我悬停的元素。相反，它似乎根本没有提及任何内容。我该怎么做才能使“this”正常工作？

Answer 1

您需要使用event delegation由于 li 元素是动态添加的。

由于您正在使用 hover ，没有悬停事件 - 这是注册两者的实用方法 mouseenter和 mouseleave事件

$('#products').on('mouseenter mouseleave', 'ul li', function () {
    $(this).find(".productDesc").fadeToggle("slow");
});