JQuery列表追加项不可选择

JQuery list append item not selectable

本文关键字：可选择 追加 列表 JQuery      更新时间：2023-09-26

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

问题是我不能突出显示它或选择它。

我的想法是我必须把上面的称为"$("#idNicheItems li")。盘旋……再次附加悬停功能后插入节点-但这似乎不工作-除非我有一个错误在我的错误修复。

我讲对了吗?

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

看起来我有一个bug在我的bug修复或一个肮脏的缓存-当然修复自己20秒后张贴....

无论如何今天的课。在使用jQuery将一个新项目插入到一个已有的列表或项目集合中，这些列表或项目集合有与它们相关的行为，不要忘记将行为附加到新项目上。

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

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

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

问题的原因是$("#idNicheItems li").hover(..)将鼠标移过和移出处理程序仅绑定到调用.hover()时存在于DOM树中的那些元素。

您可以使用.on()来解决这个问题，如:

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