クリックイベントは、jqueryデータセットと組み合わせたときに最初のページでのみ機能し、他のページは機能しません。

Question

問題を説明するのは難しいですが、うまくいけばわかります。

このプラグインページネーションを使用してjqueryデータ型で表示されるデータが1000個増えました。これは自動的に作成されます。すべての行で、データの各行に使用できるようにCSSクラスを追加します。このCSSクラスを通して、私はJavaScriptのアクションをダイアログとして呼び出すことができます。問題は、最初のページでうまくいっていますが、javascriptアクションにアクセスできない最後のページの2番目のページでは、ダイアログは表示されません。console.logに問題がないことを示していません。

これは私のコードです：

HTML

<div id="dialog" title="Select one"></div> 

PHP

が

foreach ($datafromDb as $data) { 
    $datakey = '{"dataCode":"'.$data['dataCode'].'"}'; 
    echo "<td><a href='#' class='cssClass' data-key='" . $datakey . "'>Click</a></td>"; 
} 

Javascriptを

$(document).ready(function() { 
    // implement jquery dataTables 
    $('#table').DataTable({ 
     bAutoWidth: false, 
     stateSave: true 
    }); 

    // this action executed when cssClass accessed 
    $(".cssClass").click(function() { 
     var self = this; 

     $("#dialog").dialog({ 
      resizable: false, 
      show: { 
       effect: "bounce", 
       duration: 500 
      }, 
      hide: { 
       effect: "explode", 
       duration: 500 
      }, 
      height: 100, 
      modal: true, 
      buttons: { 
       "Button 1": function() { 
        var data = $(self).data('key'); 
        window.open("http://www.example.com/" + "firstRoute" + "/" + data.dataCode, "_blank"); 
       }, 
       "Button 2": function() { 
        var data = $(self).data('key'); 
        window.open("http://www.example.com/" + "secondRoute" + "/" + data.dataCode, "_blank"); 
       } 
      } 
     }); 
    }); 
} 

Answer 1

それは、再描画 datのようですテーブル。だからあなたはバインドイベントを再度クリックする必要があります。最初に、データテーブルを変数に割り当てます。このように：

var dt = $('#table').DataTable({ 
    bAutoWidth: false, 
    stateSave: true 
}); 

その後、バインドはイベントを描きと、コールバック関数にあなたのクリックバインディングコードを移動します。

dt.on('draw', function() { 
    $(".cssClass").click(function() { 
     // The callback function. 
    }); 
}); 

は参考：このようhttps://datatables.net/manual/events

Answer 2

別の方法としては、テーブル自体にイベントリスナーを追加することができます。

$('#table').on("click", ".cssClass", function(){ 
    var self = this; 
    $("#dialog").dialog({ 
     resizable: false, 
     show: { 
      effect: "bounce", 
      duration: 500 
     }, 
     hide: { 
      effect: "explode", 
      duration: 500 
     }, 
     height: 100, 
     modal: true, 
     buttons: { 
      "Button 1": function() { 
       var data = $(self).data('key'); 
       window.open("http://www.example.com/" + "firstRoute" + "/" + data.dataCode, "_blank"); 
      }, 
      "Button 2": function() { 
       var data = $(self).data('key'); 
       window.open("http://www.example.com/" + "secondRoute" + "/" + data.dataCode, "_blank"); 
      } 
     } 
    }); 
}); 

cssClassクラスは、その後、最初のページにjQueryのにのみ使用可能ですセルはまだDOM内にはないので、イベントリスナーはアタッチされません。希望が役立ちます。

Answer 3

これはおそらく最も一般的なDataTablesエラー/問題の1つです。そうですね、実際には、それは2番目のDataTables "most common FAQ"です。

Q：私のイベントは2ページ目に

A.動作しませんのDataTableによって制御テーブル内のセルにイベントをアタッチするとき、あなたはどのように注意する必要があるのDataTableよくある質問からアランを引用する されております。 DataTablesはDOMからノードを削除するため、静的イベントリスナーで適用されたイベントは、テーブル内のすべてのノードにバインドできない場合があります。これを克服するには、このexampleに示すように、単にjQuery委任イベントリスナーオプションを使用します。

DataTablesは必要に応じてDOMから行を追加および削除するため、特に最初の行以降のページでイベントが失敗する可能性がありますDataTablesボタンイベントが読み込まれたときにページに表示されませんでした）。

この問題を回避するには、行イベントにイベントリスナーJQuery onを使用します。DataTables row().data()呼び出しを使用すると、選択/クリックされた行のデータを取得できます。あなただけの代わりの行だけにイベントを添付の上、イベントを呼び出すために、すべての行にCSSクラスを追加している理由がある、注意点として

$('#table').on('click', 'tr', function() { 
    var data = table.row(this).data(); 

    $("#dialog").dialog({ 
     resizable: false, 
     show: { 
      effect: "bounce", 
      duration: 500 
     }, 
     hide: { 
      effect: "explode", 
      duration: 500 
     }, 
     height: 100, 
     modal: true, 
     buttons: { 
      "Button 1": function() { 
       window.open("http://www.example.com/" + "firstRoute" + "/" + data('key').dataCode, "_blank"); 
      }, 
      "Button 2": function() { 
       window.open("http://www.example.com/" + "secondRoute" + "/" + data('key').dataCode, "_blank"); 
      } 
     } 
    }); 
}); 

：あなたのケースでは、それはおそらく、このようになりますこの例のように、自分自身ですか？