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列表附加項不可選

回答

相關問題