Question

我有一个奇怪的问题，jquery追加到列表。

<ul id="idNicheItems" class="clScrollItems ui-widget-content ui-corner-all">
    <li id="NicheItem_1"> Item 1</li>
    <li id="NicheItem_2"> Item 2</li>
    <li id="NicheItem_3"> Item 3</li>
    <li id="NicheItem_4"> Item 4</li>
</ul>

该列表是使用

的列表框类型控件的一部分

 $("#idNicheItems li").hover(function(){
    $(this).addClass("clListHighlight");
      },function(){$(this).removeClass("clListHighlight");});

一切正常。

稍后在json查询后，我将新项添加到列表中。当我使用firebug检查它时，它看起来就像列表中的每个其他项目 - ids是唯一的 - 一切看起来都很好。

麻烦在于我无法突出显示或选择它。

我的想法是我必须拨打以上"$("#idNicheItems li")。悬停..在插入节点后附加悬停功能 - 但这似乎不起作用 - 除非我的错误修复中有错误。

我是在正确的轨道上吗？

回答自己的问题 - 但我的代表低于蚯蚓肚脐 - 但它可能对其他人有用，所以不会删除它。

看起来我的错误修复或脏缓存中有一个错误 - 当然在发布后20秒就自行修复了....

无论如何当天的课程。在使用jQuery将prepend等附加到现有列表或具有与之关联的行为的项集合之后插入新项目时 - 不要忘记将行为附加到新项目。

换句话说，在新项目的原始项目上调用您调用的选择器代码。

Answer 1

你可以使用live（），它绑定到DOM树的根节点而不是元素：

$("#idNicheItems li").live('mouseover',function(){$(this).addClass("clListHighlight")});
$("#idNicheItems li").live('mouseout',function(){$(this).removeClass("clListHighlight")});

Answer 2

问题的原因是$("#idNicheItems li").hover(..)只会将鼠标悬停和处理程序绑定到调用.hover（）时DOM树中存在的那些元素。

您可以使用.on()来解决此问题：

$("#idNicheItems")
    .on('mouseover', 'li', function() {
        $(this).addClass("clListHighlight");
    })
    .on('mouseout', 'li', function() {
        $(this).removeClass("clListHighlight");
    });

JQuery列表附加项不可选

2 个答案: