jqueryデータテーブルが2番目のページから機能しない

Question

jqueryデータテーブル1.9.4とjquery 1.9.1を使用していますが、このようなajax呼び出しをclickイベントで実行しようとしています。

$(".icon-trash").on('click',function() { 
       // alert($(this).attr('id')); 
       $.post('/WorkOrderRequest/DeleteWOR', 
         { id: $(this).attr('id') }, 

         function (returndata) 
         { 

          if (returndata.ok) 
          { 
           window.alert(' deleted!'); 
           $("#emp" + idemployee).hide('slow'); 
          } 
          else { 
           window.alert(' error : ' + returndata.message); 
          } 

        }); 

      }); 

HTML部分：それは、最初のページではなく、2ページ目から正常に動作している

@foreach (var item in Model) 
        { 

         <tr> 
          <td> 
           @Html.DisplayFor(modelItem => item.ProjectCode) 
          </td> 
          <td> 
           @Html.DisplayFor(modelItem => item.WO_Date) 
          </td> 


          <td> 
          <a id='@(item.WO_ID)' class="icon-edit" /> 
           |        
          <a id='@(item.WO_ID)' class="icon-trash" /> 
          </td> 
         </tr> 
        } 

そのいずれかの結果を示していません。助けてください

Answer 1

ページングの仕方によっては、現在のページでは不要な行がDOMから削除されます。したがって、これらの要素に直接バインドするイベントハンドラは、htmlを削除すると失われます。

委任構文をon()にすると、永続的なページ内のアセットにハンドラーをバインドする必要があります。これはdocument

$('#TableID').on('click','.icon-trash',function() {... 

APIリファレンスを含め、親テーブルまたはツリーまでの任意の他の親のようになります。http://api.jquery.com/on/

Answer 2

あなただけjsにdatatableコードの上にあなたのクリックイベントのコードを配置する場合、それが正常に動作します。

例として。

$(".icon-trash").on('click',function() {}); 

$("#TableID").datatable(); 

Answer 3

私は同じ問題を持っていると私は最後の

$('#yourTable').dataTable();

でラインの下のコードを下に移動して、それを解決するには、それが誰かを助けることを願っています。