jQuery選擇器忽略在頁面加載後操作的類

Question

我有一些按鈕，當點擊時，調用jQuery刪除並替換它們的類。我想要調用的jQuery.mouseover事件忽略操作類，並且只從頁面加載中服從類。

下面是一個例子如下JSFiddle

詳情：

我有一排按鈕，當滑過調用一些jQuery的一個.highlighted類的其他地方添加到對象在頁面上：

這裏的例子HTML：

<ul id="portfolioLinks"> 
    <li class="activeButton kittens"><a class="kittens" href="#"></a></li> 
    <li class="activeButton otters"><a class="otters" href="#"></a></li> 
    <li class="depressed donkey"><a class="donkey" href="#"></a></li> 
</ul> 

和相應的jQuery代碼：

var selectedType = '.' + $(this).attr('class'); 


$("li.activeButton a").mouseenter(function() { 

    var selectedType = '.' + $(this).attr('class'); 

    $("div.pageContent div" + selectedType).addClass('highlighted'); 

});  

$("#portfolioLinks a").mouseleave(function() { 

    $("div.pageContent div").removeClass('highlighted'); 

}); 

也能正常工作從頁面加載靜態內容，但是當我點擊一個按鈕，我得到 jQuery的一個.depressed類添加到$(this)並給所有其他.activeButton：

$("#portfolioLinks a").click(function() { 


    $("#portfolioLinks li").addClass('activeButton').removeClass('depressed'); 

    $(this).parent().removeClass('activeButton').addClass('depressed'); 

//do some other stuff 

}); 

但是，它似乎完全忽略了改變的類，並繼續突出顯示匹配缺少.activeButton類的按鈕的div。

我花了大部分時間在昨晚，今天早上想弄明白這一點。我嘗試過所有的方式.not s，:not s和if s，而我現在完全失去了。

任何指導將不勝感激。

Answer 1

使用.delegate()這裏，而不是像這樣：

$("#portfolioLinks").delegate("li.activeButton a", { 
    mouseenter: function() { 
    var selectedType = '.' + $(this).attr('class'); 
    $("div.pageContent div" + selectedType).addClass('highlighted'); 
    }, 
    mouseleave: function() { 
    $("div.pageContent div").removeClass('highlighted'); 
    }); 

Here's your fiddle updated with the above code, working。

的問題是，當你做$("li.activeButton a")你不綁定任何東西的類，你將事件綁定到你發現與類的元素，當它運行 ...的元素現在已綁定事件處理程序。未來的任何變化都是無關緊要的，處理者是有約束力的。

隨着.live()和.delegate()然而，選擇檢查當事件發生時，所以確實事情該類改變。作爲獎勵，它對許多元素來說也便宜，因爲一個處理程序在#portfolioLinks上。

---

如果使用jQuery 1.4.3比舊的，你需要非地圖形式，像這樣：

$("#portfolioLinks").delegate("li.activeButton a", "mouseenter", function() { 
    var selectedType = '.' + $(this).attr('class'); 
    $("div.pageContent div" + selectedType).addClass('highlighted'); 
}).delegate("li.activeButton a", "mouseleave", function() { 
    $("div.pageContent div").removeClass('highlighted'); 
});