のjQueryのDataTable - 私は<a href="http://datatables.net/index">DataTables jQuery Plugin</a>を使用している最初の

Question

以外のページに登録しない]をクリックし、行と次のように行をクリックしたときに、クリックハンドラを設定している：

$('#dt tbody tr').click(function() { 
     alert('e'); 
}); 

これは、DataTableの結果の最初のページのために完璧に動作します。

しかし、結果の別のページに移動すると、クリックハンドラは登録されなくなります。

私の前提は、DataTablesコードがclickイベントの宣言を自分のハンドラに停止させていることですが、これは最初のページの後でのみ発生するため、珍しいようです。

などは、誰もが持っていたよう：

1. が発生しました（理想的に解決する）この問題
2. は、イベントが

を停止される理由隔離するためのjQuery/JSイベントプロパゲーションを追跡するための良い方法を見つけました

乾杯

Answer 1

この問題は、1ページのアプリケーションで発生しました。ライブメソッドは私のために働いたポストバックの後を除いて。私のテーブルにはajaxを使ってテーブルが作成され、ユーザーはそれを破壊して再作成する可能性がありました。私はDataTableのを使用し、それを修正するには

$：。 「http://datatables.net/api#$」

ここでは、例のDataTableが隠し行機能に与える使用して私の修正です。

$(document).ready(function() { 
    /* 
    * Insert a 'details' column to the table 
    */ 
    var nCloneTh = document.createElement('th'); 
    var nCloneTd = document.createElement('td'); 
    nCloneTd.innerHTML = '<img src="../examples_support/details_open.png">'; 
    nCloneTd.className = "center"; 

    /* CHANGE: Remove all the expand control elements we may have added earlier 
    * or else you'll add a new column for every postback 
    */ 
    $('.expand-control').remove(); 

    /* 
    * CHANGE: Add the expand-control class to these elements, 
    * so we can remove them after a postback 
    */ 
    $(nCloneTh).addClass('expand-control'); 
    $(nCloneTd).addClass('expand-control'); 

    $('#example thead tr').each(function() { 
     this.insertBefore(nCloneTh, this.childNodes[0]); 
    }); 

    $('#example tbody tr').each(function() { 
     this.insertBefore( nCloneTd.cloneNode(true), this.childNodes[0]); 
    }); 

    /* 
    * Initialse DataTables, with no sorting on the 'details' column 
    */ 
    var oTable = $('#example').dataTable({ 
     "aoColumnDefs": [ 
      { "bSortable": false, "aTargets": [ 0 ] } 
     ], 
     "aaSorting": [[1, 'asc']] 
    }); 

    /* Add event listener for opening and closing details 
    * Note that the indicator for showing 
    * which row is open is not controlled by DataTables, 
    * rather it is done here 
    */ 

    /* CHANGE: Here I use jQuery.dataTable.$ instead of 
    * jQuery('#example tbody td img'), 
    * this is what preserves the event handler on the 2nd (etc) 
    * pages after a postback 
    * Note the use of on instead of live, recommended over live as of 1.7 
    */ 
    oTable.$('tr').find('img').on('click', function() { 
     var nTr = $(this).parents('tr')[0]; 
     if (oTable.fnIsOpen(nTr)) 
     { 
      /* This row is already open - close it */ 
      this.src = "../examples_support/details_open.png"; 
      oTable.fnClose(nTr); 
     } 
     else 
     { 
      /* Open this row */ 
      this.src = "../examples_support/details_close.png"; 
      oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details'); 
     } 
    }); 
}); 

Answer 2

私は、イベントハンドラバインディングが最初に読み込まれた行にのみ適用されていると推測しています。しかし、行のコレクションがマークアップで再レンダリングされると、イベントハンドラはもう消えません。

jQueryのlive()機能を確認してください。重要なのは、イベントハンドラはセレクタ基準を満たすすべての要素に「現在および将来」バインドされていることです。

Answer 3

すべてのDataTables行のボタンで同じ問題が発生しましたが、クリックイベントは結果の最初のページの後のボタンでは機能しませんでした。崑は、正しい分析（ありがとう崑）を与えたが、例のコードをお探しの方のために、ここで私のために働いたものです：助け

$('.myButton').live('click', function() { 
    var id = $(this).closest("tr").attr("id"); 
    var string = 'div_id=' + id; 
    alert(string); 
     // string sent to processing script here 
}); 

希望を！

Answer 4

liveは廃止予定ですので、「.on」を使用することをおすすめします。

これはあなたの問題を解決する必要があります：それは非常に効率的ではないよう

$(document).on('click', '.myButton', function() { 
    var id = $(this).closest("tr").attr("id"); 
    var string = 'div_id=' + id; 
    alert(string); 
     // string sent to processing script here 
}); 

あなたは、いくつかの親要素で文書を交換することができます。おそらくあなたのテーブルを含むdivを使ってみてください。

Answer 5

私の答えは@Chris Everittの回答と似ていますが、若干の違いがあります。それを見たい人のためだけに..ここに行く..テーブル内のすべてのimg（DOMのattrの）イベントを登録

var oTable = $('#masterTable').dataTable({ 

       "aLengthMenu": [[5,10, 25, 50, 100 , -1], [5,10, 25, 50, 100, "All"]], 
       "iDisplayLength" : 10, 
       "aoColumnDefs": [ 
          {"sWidth": "25%", "aTargets": [ 0 ] }, 
          {"sWidth": "10%", "aTargets": [ 1 ] }, 
          {"sWidth": "10%", "aTargets": [ 2 ] }, 
          {"sWidth": "10%", "aTargets": [ 3 ] }, 
          {"sWidth": "10%", "aTargets": [ 4 ] }, 
          {"sWidth": "10%", "aTargets": [ 5 ] }, 
          {"sWidth": "15%", "aTargets": [ 6 ] }, 

          {"sClass": "align-left" , "aTargets": [ 0,1,4, 2,3,5,6] }    
         ], 

      "aoColumns": [ 
       { "bSortable": true }, 
       null, null, null,null, null, 
       { "bSortable": true } 
      ] 

      }); 

-

oTable.$('td').each(function() { 

        $(this).on('click','img', function() { 
         var nTr = $(this).parents('tr')[0]; 
         if (oTable.fnIsOpen(nTr)) 
         { 
          /* This row is already open - close it */ 
          this.src = "${pageContext.request.contextPath}/theme/v_1_0/app-images/details_open.png"; 
          oTable.fnClose(nTr); 
         } 
         else 
         { 
          /* Open this row */ 
          this.src = "${pageContext.request.contextPath}/theme/v_1_0/app-images/details_close.png"; 



          var html = '<div> Placeholder here.. </div>'; 

          oTable.fnOpen(nTr, html, 'details'); 

          } 
        });