버전 1.7에서 jQuery "live"를 사용하는 방법을 모르십니까?

Question

텍스트를 표시하거나 숨길 수있는 작은 스 니펫입니다. 문제는 "readless"클래스에 대해 click 이벤트가 발생하지 않는다는 것입니다. 일반적으로 jQuery의 "라이브"기능을 사용하지만, "사용"으로 인해 더 이상 사용되지 않으므로 어떻게해야합니까? 여기

은 jsfiddle입니다 : http://jsfiddle.net/SSAu2/

코드 :

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

거기에 시간이 없다. 선택기 '.readless-anchor'와 일치하는 모든 요소. .on()의 작동 방식은 부모로 사용할 요소가 하나 필요합니다. 자손 아래에서 발생하는 모든 이벤트는 부모에게 거품을 불어 넣어 적절한 처리기를 호출합니다. 그래서 jquery에 대한 기본 선택기가 이미 존재한다는 것이 중요합니다. documentation에서

,

이벤트 핸들러는 현재 선택된 요소에 바인딩; 코드가 .on()을 호출 할 때 페이지에 이 있어야합니다.

.on() 함수의 두 번째 매개 변수는 필터링 할 선택기입니다.

귀하의 경우 .on()을 body에 고정시키고 수업별로 필터링 할 수 있습니다. // liveisdeprecated :

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

이 일종의 오프 상당 (1) 실현하기위한 .live()

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

Answer 2

당신은 다음과 같이 시도 할 수 있습니다 : DOM을 준비 함수가에서 실행

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

Live demo