javascript - JQuery 列表追加项目不可选择

Question

我在将 jquery append 到列表时遇到了一个奇怪的问题。

<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 检查它时，它看起来就像列表中的所有其他项目一样 - id 是唯一的 - 一切看起来都很好。

问题是我无法突出显示或选择它。

我的想法是，我必须在插入节点后再次调用上面的 "$("#idNicheItems li").hover .. 来 append 悬停功能 - 但这似乎并不工作 - 除非我的错误修复中有错误。

我走在正确的道路上吗？

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

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

无论如何当天的类(class)。使用 jQuery 插入新项目后，将 prepend 等添加到具有与其关联的行为的现有项目列表或集合中 - 不要忘记将行为 append 到新项目。

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

Answer 1

你可以使用live()，它绑定(bind)到DOM树的根节点而不是元素:

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