jquery悬停不适用于我的列表项

Question

我遇到了一个奇怪的问题，我向使用 ajax 动态生成的列表项添加了悬停功能，但没有任何反应。代码执行时没有任何错误，但没有任何效果。即使 mouseenter 和 mouseout 也没有显示警报。警报偶尔会弹出一次，但不是每次都会弹出。我正在使用以下代码。

$('.category_list li').live("mouseenter", function() { 
alert('I m here');
  $(this).find('.category_list').css('text-decoration','underline');
}).live("mouseleave", function() {
alert('I m gone');
  $(this).find('.category_list').css('text-decoration','none');
}); 

我的 html 代码是

htmlData.push('<ul class="category_list">');
htmlData.push('<li><a href="javascript:void(0);" onclick="callGetApplicationDetails('+iIndex+',0);" >'+categoryName+'</a></li>');

请帮助我，因为我陷入了困境。

谢谢 赫米什

Answer 1

尝试使用 mouseover 和 mouseout 事件。我相信您的过滤选择器正在寻找

元素父元素？

$('.category_list li').live('mouseover mouseout', function(event) {
    if (event.type == 'mouseover') {
        alert('I m here');
        $(this).parent().css('text-decoration','underline');
    } else {
        alert('I m gone');
        $(this).parent().css('text-decoration','none');
    }
});

---

你可以用一个新的 css 类稍微清理一下 jQuery

.category_list.over
{
    text-decoration: underline;
}

并使用 toggleClass()

$('.category_list li').live('mouseover mouseout', function(event) {
    if (event.type == 'mouseover') { alert('I m here'); } 
    else { alert('I m gone'); }

    $(this).parent().toggleClass('over');
});

Answer 2

如果您不需要通过此功能支持 IE6，请改用 CSS：

示例： http: //jsfiddle.net/QLsQp/

.category_list li a {
    text-decoration:none;
}

.category_list li:hover a {
    text-decoration:underline;
}

当 li 被选中时，它使用 :hover 伪选择器影响嵌套的 a 元素盘旋。

---

javascript 的问题在于：

$(this).find('.category_list')

...找不到任何内容，因为 .category_list 是

的祖先 > 元素，而不是后代。

你需要这个：

$(this).find('a')

Answer 3

最后！我使用了livequery，它成功了！

$('.category_list li').livequery("mouseenter", function() {
    $(this).css({'background-color' : '#A9A8A8'})
}).livequery("mouseleave", function() {
    $(this).css({'background-color' : '#F4F4F4'})
});

@Patrick：感谢您的帮助。

希望它也能帮助其他人。