1

我有一个将 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 查询之后，我将一个新项目附加到列表中。当我使用萤火虫检查它时，它看起来就像列表中的所有其他项目一样 - id 是唯一的 - 一切看起来都很好。

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

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

我在正确的轨道上吗？

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

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

反正今天的课。在使用 jQuery append prepend 等将新项目插入到现有列表或具有相关行为的项目集合后 - 不要忘记将行为附加到新项目。

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

4

2 回答 2

1

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

$("#idNicheItems li").live('mouseover',function(){$(this).addClass("clListHighlight")});
$("#idNicheItems li").live('mouseout',function(){$(this).removeClass("clListHighlight")});
于 2013-05-19T09:19:21.393 回答
0

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

您可以使用以下方法解决此问题.on()：

$("#idNicheItems")
    .on('mouseover', 'li', function() {
        $(this).addClass("clListHighlight");
    })
    .on('mouseout', 'li', function() {
        $(this).removeClass("clListHighlight");
    });
于 2013-05-19T08:49:36.790 回答