No estoy seguro de cómo usar jQuery "en vivo" a partir de la versión 1.7

Question

Aquí hay un pequeño fragmento para mostrar/ocultar el texto. El problema es que el evento click no se dispara para la clase "readless". Por lo general, habría utilizado la función "en vivo" de jQuery, pero como está en desuso a favor de "on", me pregunto cómo debo hacerlo.

He aquí una jsFiddle: http://jsfiddle.net/SSAu2/

código:

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

Cuando la función de lista dom ejecuta, en el tiempo no existe cualquier elemento que coincida con el selector '.readless-anchor'. La forma en que funciona .on() es que necesita un elemento para usar como padre. Todos los eventos que ocurran bajo sus descendientes burbujearán hasta el padre y llamarán al controlador apropiado. Por eso es importante que el selector primario para jquery ya exista.

Desde el documentation,

Los controladores de eventos sólo están vinculados a los elementos seleccionados actualmente; ellos deben existir en la página en el momento en que su código realiza la llamada a .on().

El segundo parámetro para la función .on() es el selector para filtrar.

En su caso, puede anclar el .on() en body y filtrar por sus clases.

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

Esta es una especie de equivalente a lo que podría haber hecho uso de .live()

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

Answer 2

Usted puede tratar de esta manera:

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

Live demo