Question

我有一个div，其中正在动态地加载无序列表。首先，让我说当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>

问题出在＆＃34; this＆＃34;。当新的UL被动态加载时，＆＃34; this＆＃34;似乎不再是指我徘徊的元素。相反，它似乎根本没有提到任何东西。我能做些什么来制作＆＃34; this＆＃34;工作正常吗？

Answer 1

您需要使用event delegation，因为li动态添加了元素。

由于您使用的是hover，因此没有悬停事件 - 它是一种用于注册mouseenter和mouseleave事件的实用方法

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

Answer 2

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

在动态加载<ul> </ul>时使用“this”进行定位

2 个答案: