バージョン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()ですが、親として使用するには1つの要素が必要です。その子孫の下で発生するすべてのイベントは、親プロセスを呼び起こし、適切なハンドラを呼び出します。そのため、jQueryの主セレクタが既に存在することが重要です。 documentationから

、

イベントハンドラはのみ、現在選択された要素にバインドされています。コードが.on（）を呼び出すときに、ページに が存在していなければなりません。

.on()関数の2番目のパラメータは、フィルタリングするセレクタです。

あなたのケースでは、.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