Datatable Jqueryの2ページ目のレコード削除イベントが機能しない

Question

私はデータベースからフェッチされたレコードに対してdatatable jqueryを使用しています。レコードごとに編集および削除イベントを実行したかったのです。

データテーブルにページがあり、削除機能に問題があります。

下の画像に示すように、それはsucesfully実行されます最初のページの削除機能については

これは私の第二ページネーションページですと言っても機能に

を呼び出すことはありません。

これは私のHTMLコードです

<a class="supp_delete_link" id="<?php echo $user->ID; ?>"> 
       <i class="link black remove icon"></i> 
      </a></td> 

これは、上記のコードは、私が最初にページネーションの午前たときに完璧に動作しますが、すべてで2ページ目にしたときに呼び出されません私のjavascriptのコード

<script type="text/javascript"> 
     $(function(){ 
      $(".supp_delete_link").click(function(){ 
      debugger; 
      var element = $(this); 
      var del_id = element.attr("id"); 
      console.log(del_id); 
      var info = del_id; 
     if(confirm("Are you sure you want to delete this?")) 
     { 
      $.ajax({ 
      type: "GET", 
      url: "supplierdelete"+'/'+info, 
      data: info, 
      success: function(){ 
      } 
     }); 
      $(this).parents(".show").animate({ backgroundColor: "#003" }, "slow") 
      .animate({ opacity: "hide" }, "slow"); 
      } 
     return false; 
     }); 
     }); 
</script> 

です。

さらに気味が悪いですが、コンソールにエラーも表示されません。 私は立ち往生しています。

Answer 1

バインドは...

<script type="text/javascript"> 
    $(function(){ 
     $(document).on("click",".supp_delete_link",function(){//change this line on event bind 
     debugger; 
     var element = $(this); 
     var del_id = element.attr("id"); 
     console.log(del_id); 
     var info = del_id; 
    if(confirm("Are you sure you want to delete this?")) 
    { 
     $.ajax({ 
     type: "GET", 
     url: "supplierdelete"+'/'+info, 
     data: info, 
     success: function(){ 
     } 
    }); 
     $(this).parents(".show").animate({ backgroundColor: "#003" }, "slow") 
     .animate({ opacity: "hide" }, "slow"); 
     } 
    return false; 
    }); 
    }); 

Answer 2

これは、AJAXからコンテンツを読み込むためではありません。

イベント（更新、削除）は、最初に読み込まれたコンテンツにのみバインドされます。

したがって、基本的にイベントはバインディングではありません。

動的にロードされたコンテンツに対してもイベントがバインドされるように、関数を変更する必要があります。

jQuery .on()は、ダイナミックにロードされたコンテンツにもイベントをバインドする方法です。

修正コード：イベントの

<script type="text/javascript"> 
     $(function(){ 
      $(".supp_delete_link").on('click', function(){ 
      debugger; 
      var element = $(this); 
      var del_id = element.attr("id"); 
      console.log(del_id); 
      var info = del_id; 
     if(confirm("Are you sure you want to delete this?")) 
     { 
      $.ajax({ 
      type: "GET", 
      url: "supplierdelete"+'/'+info, 
      data: info, 
      success: function(){ 
      } 
     }); 
      $(this).parents(".show").animate({ backgroundColor: "#003" }, "slow") 
      .animate({ opacity: "hide" }, "slow"); 
      } 
     return false; 
     }); 
     }); 
</script> 

jQuery API .on()

Answer 3

に動作します私は

を変更すると、それを解決しました0

$(function(){ 
     $(".supp_delete_link").click(function(){.....}); 

私が試した

$(document).on('click', '.supp_delete_link', function(e){ 
e.preventDefault();......});