.on（）を使用してjqueryを使用してページ上の動的挿入ボタンにイベントをアタッチする

Question

私はユーザーの投稿を返すページを持っています。これらの投稿は新しいコメントが投稿された後にjqueryコードを使ってオンザフライでコメントできます。投稿の下の新しいコメントとDeleteボタン。問題は、ページをリロードしない限り、新しく挿入された要素でDeleteボタンが機能しないことです。ソリューションが.on（）メソッドを使用していると読んでいますが、これを実装する方法は少し混乱しています。私はここに、どのように変更する必要があるかを理解していない

$(document).ready(function() { 

    $("button[id*='deletecmnt_']").click(function() { 

     var id = this.id.replace('deletecmnt_', ''); 

     var comment_card_id = ('#comment_' + id); 

     var token = $(this).data('token'); 

     $.ajax({ 
      url: '../comment/' + id, 
      type: 'post', 
      data: {_method: 'delete', _token: token}, 
      success: function() { 


       // Checks for display of comment card and removes it 
       if ($(comment_card_id).is(":visible")) { 

        $(comment_card_id).fadeOut("fast"); 

       } 
      } 
     }) 

    }) 

}); 

： は私が新たに挿入されたコメントでポスト部分を更新し、このコメントを削除機能である一つの機能を持っています。

Answer 1

動的に追加された要素のイベント委譲を使用する必要があります。 .on（）メソッドでは、ハンドラを作成した後にそのセレクタを追加する必要があります。

$(document).ready(function(){ 

    $("body").on("click", "button[id*='deletecmnt_']", function() { 
    // codes 
    } 
}); 

これは、セレクタに一致するまだ作成されていない要素のクリックを待ち受けます。詳細はJQuery APIのドキュメントページをご覧ください：http://api.jquery.com/on/