Javascript 以“为目标”；这"；关于动态加载<；ul>；

我有一个div，其中动态加载了一个无序列表。首先，我要说的是，当ul被硬编码时，它可以完美地工作，当加载一个新的ul时，问题就会出现。以下是我的javascript：

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

动态加载到

中的代码html的结构如下：

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

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

这里是说明1


此处为说明2

问题在于“

这个

”。当动态加载新的UL时，“

此

”似乎不再引用我悬停的元素。相反，它似乎什么都没有提到。如何使“

此

”正常工作？

您需要使用，因为

li

元素是动态添加的

因为您正在使用，所以没有悬停事件-这是一个实用的方法来注册和事件

---

在ajax代码之后插入第一个代码，然后附加侦听器…将悬停委托给#Product为悬停添加实时事件。如果为动态加载的元素触发事件，则这将引用正确的li元素。它不能指“什么都没有”。那么，处理程序是否真的被触发了呢？您需要查看，mouseenter和mouseleave eventsOP也可以在创建元素时直接绑定到元素，这有时比多次触发的事件（如

mouseenter/leave

）的委托更可取。是的，就是这样！我不太理解它背后的理论，但它确实解决了这个问题。jp310答案中的.delegate方法如何？它们有什么不同？@user2755541没有太大区别

.on（）

是一个新方法（>=1.7），其中as delegate是从1.4.2。。。但是新代码推荐的方法是on

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

$('#products').delegate('ul li','hover', function( event ) {
    if( event.type === 'mouseenter' )  
        //your code here 
    else
        //your code here  
});