JQuery列表附加项不可选

我有一个奇怪的问题，附加到一个jQuery的列表。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查询后，我追加了一个新的项目列表。当我使用萤火虫检查它时，它看起来就像列表中的其他项目 - ids是唯一的 - 一切看起来都很好。

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

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

我在正确的轨道上吗？

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

貌似我在我的bug修复错误，还是一个脏缓存 - 当然是固定本身张贴20秒后....

反正教训为的一天。使用jQuery插入新项目后，将prepend等附加到现有列表或具有与其相关行为的项目集合 - 不要忘记将行为附加到新项目。

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

来源

2013-05-19 Brenton Thomas

代替（）函数（）{（this）.addClass（“clListHighlight”）; }，function（）{ $（this）.removeClass（“clListHighlight”）; }）;'，你可以简单地执行'$（“＃idNicheItems li”） r（function（）{（this）.toggleClass（“clListHighlight”）; }）;'。同样的效果，用更少的代码:) –

您可以将用户生活（），它结合到DOM树的根节点，而不是一个元素：

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

来源

2013-05-19 09:19:21

'live（）'是如此过时。改用'on（）'。 – techfoobar

你说得对，我正在学习。 –

的原因问题是$("#idNicheItems li").hover(..)将鼠标悬停并进行处理仅绑定到在调用.hover（）的时间存在于DOM树的元素。

您可以通过使用.on()像解决这个问题：

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

来源

2013-05-19 08:49:36 techfoobar

JQuery列表附加项不可选

回答

相关问题