jQuery sürüm 1.1'den "canlı" nasıl kullanıldığından emin değil.

Question

Burada, metni göstermek/gizlemek için küçük bir parçacık var. Sorun, tıklama etkinliğinin "serbest" sınıf için ateşlememesidir. Genellikle jQuery'nin "canlı" işlevini kullanırdım, ancak "on" lehine kabul edilmediğinden, nasıl yapmalıyım acaba? İşte

Bir jsfiddle var: http://jsfiddle.net/SSAu2/

kodu:

$(document).ready(function(){ 

    var showHiddenText = function(e){ 

     e.preventDefault(); 

     var $this = $(this); 
     $this.prev().fadeIn(); 
     $this.text("less").removeClass("readmore-anchor").addClass("readless-anchor"); 
    }; 

    var hideShownText = function(e){ 

     e.preventDefault(); 

     var $this = $(this); 
     $this.prev().fadeOut(); 
     $this.text("more").removeClass("readless-anchor").addClass("readmore-anchor"); 
    }; 

    $(".readmore").after("<a href='#' class='readmore-anchor'>More</a>"); 
    $(".readmore-anchor").on("click", showHiddenText); 
    $(".readless-anchor").on("click", hideShownText); 

});​ 

Answer 1

orada zaman yok seçici '.readless-çapa' ile eşleşen herhangi bir öğe. .on()'un çalışma şekli, ebeveyn olarak kullanmak için bir öğeye ihtiyaç duyar. Torunları altında meydana gelen tüm olaylar ebeveynleri uyandıracak ve uygun işleyiciyi arayacaktır. Bu nedenle, jquery için birincil seçicinin zaten mevcut olması önemlidir. documentation kaynaktan

,

olay gidericiler sadece seçili elemanlara bağlıdır; , kodunuzun aramayı .on() yapmasını istedikleri anda sayfada bulunmalıdır.

.on() işlevinin ikinci parametresi, filtrelenecek seçicidir.

Sizin durumunuzda, .on()'u body'a bağlayabilir ve sınıflarınıza göre filtreleyebilirsiniz. // liveisdeprecated:

$("body").on("click", ".readmore-anchor", null, showHiddenText); 
$("body").on("click", ".readless-anchor", null, hideShownText); 

Bu tür kapalı eşdeğer (1) gerçekleştirme için .live()

$("body").find(".readmore-anchor").live('click', showHiddenText); 

Answer 2

Böyle deneyebilirsiniz: dom hazır fonksiyon olarak, yürütür

$(document).on("click",".readmore-anchor", showHiddenText); 
$(document).on("click",".readless-anchor", hideShownText); 

Live demo