jQuery seçicileri, sayfanın yüklenmesinden sonra işlenen sınıfları yok sayıyor

Question

Tıklatıldığında, sınıflarını kaldırmak ve değiştirmek için jQuery'yi çağırdığım bazı düğmelerim var. Çağırmak istediğim jQuery.mouseover olayı, manipüle edilen sınıfları görmezden geliyor ve yalnızca sınıfları sayfa yüklemesine uyuyor.

:

ben devirdi zaman sayfada başka nesnelere bir .highlighted sınıf eklemek için bazı jQuery çağırmak düğme satırı vardır:

Burada bir örnek aşağıda JSFiddle

Ayrıntıları var İşte örnek bir HTML kodunun:

<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> 

ve ilgili jQuery kodu:

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'); 

}); 

Bu sayfa yük statik içeriği çalışıyor, ama ben almak bir düğmeye tıkladığınızda jQuery $(this) bir .depressed sınıf ekleyebilir ve tüm diğerlerine .activeButton vermek:

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


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

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

//do some other stuff 

}); 

Ancak, değiştirilmiş sınıfları tamamen yok sayıyor ve .activeButton sınıfından yoksun bir düğmeyle eşleşen div'leri vurgulamaya devam ediyor.

Dün gecenin çoğunu ve bu sabah bunu çözmeye çalışırken harcadım. Her türlü .not s, :not s ve if s denedim ve şimdi tamamen kayboldum.

Her türlü yönlendirme son derece takdir edilecektir. Böyle yerine buraya

Answer 1

Kullanım .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.

konu ... Eğer sınıfa bir şey bağlayıcı değil $("li.activeButton a") yapınca çalıştırıldığında, size sınıf ile bulunan elemanlarına bağlanarak olayları olduğunuzu olduğunu öğelerinin artık olay işleyicileri bağlı. Gelecekte herhangi bir değişiklik alakasız, işleyiciler bağlı. Ancak .live() ve .delegate() ile

, olay gerçekleştiğinde seçici kontrol edilir, bu nedenle sınıf değiştirdi önemi var. Bir bonus olarak,üzerinde bir işleyici grubu olduğundan, birçok öğe için daha ucuzdur.

1.4.3'te daha eski jQuery kullanılıyorsa

---

, böyle olmayan haritası formunu gerekir:

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