jQueryセレクターは、ページがロードされた後に操作されるクラスを無視しています。

Question

クリックするとjQueryを呼び出してクラスを削除して置き換えるボタンがいくつかあります。私が呼びたいjQuery.mouseoverイベントは、操作されたクラスを無視しているだけで、ページロードのクラスに従っています。

：

私は、ロールオーバー時にページ上の他の場所のオブジェクトに.highlightedクラスを追加するために、いくつかのjQueryを呼び出すボタンの列があります。

は、ここでは一例に以下JSFiddle

詳細ですここでは例の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'); 

}); 

これは、ページのロードからの静的コンテンツに正常に動作しますが、私は$(this)に.depressedクラスを追加し、他のすべてに.activeButtonを与えるために、私は のjQueryを取得]ボタンをクリックしたとき：

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


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

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

//do some other stuff 

}); 

しかし、それは変更されたクラスを完全に無視するようであり、.activeButtonクラスを持たないボタンと一致するdivを強調表示し続けます。

私は昨夜の大部分を費やし、今朝はこれを理解しようとしました。私は.not s、:nots、ifのすべての方法を試しましたが、今は完全に失われています。

ご指摘いただければ幸いです。このような代わりに、ここで

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にあるためです。 1.4.3よりも古いのjQueryを使用している場合

---

、あなたは非マップ形式が必要になります、次のように：

$("#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'); 
});