Nicht sicher, wie man jQuery "live" von Version 1.7 verwendet

Question

Hier ein kleiner Ausschnitt zum Anzeigen/Verbergen von Text. Das Problem ist, dass das Klickereignis nicht für die Klasse "readless" ausgelöst wird. Normalerweise hätte ich die "Live" -Funktion von jQuery verwenden müssen, aber da es für "on" veraltet ist, frage ich mich, wie ich es machen soll?

Hier A jsfiddle: http://jsfiddle.net/SSAu2/

Code:

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

Live demo

Answer 1

Wenn der dom-Ready-Funktion ausführt, bei der:

$(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 2

Sie mögen diese versuchen kann Zeit gibt es nicht jedes Element, das dem Selektor '.readless-anchor' entspricht. Die Art, wie .on() funktioniert, ist, dass ein Element als Eltern verwendet werden muss. Alle Ereignisse, die unter seinen Nachkommen auftreten, werden bis zum übergeordneten Element aufsteigen und den entsprechenden Handler aufrufen. Aus diesem Grund ist es wichtig, dass der primäre Selektor für jquery bereits existiert.

Vom documentation,

Eventhandler werden nur die aktuell ausgewählte Elemente gebunden ist; Sie müssen auf der Seite zu dem Zeitpunkt vorhanden sein, zu dem der Code den Aufruf von .on() aufruft.

Der zweite Parameter der .on()-Funktion ist der zu filternde Selektor.

In Ihrem Fall könnten Sie die .on() auf body verankern und nach Ihren Klassen filtern.

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

Dies ist eine Art aus entspricht dem, was man .live()

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