web-dev-qa-db-ja.com

JQuery .on（ 'click'）がDataTablesの2ページ目または11を超える行で機能しない

ハイパーリンクをクリックすると、各行の動的リストで実行されるjQueryリンクがあります。

これはデータテーブルが適用される前に機能しますが、データテーブルが11行目に表示されると（デフォルトの10よりも高い表示に変更した後）、または別のページでjQueryが呼び出されなくなります。

私はこれをjsFiddleに投げてみましたが、そこで動作しますので、何らかの理由でjsFiddleで再現できません。

正しい方向へのポインタは大歓迎です。

PHP：

echo "<table id='paginatedTable'>";
echo "<thead><th>Test1</th><th>Test2</th></thead><tbody>";
foreach($array as $arr){
 echo "<tr><td>" . $arr['test1'] . "</td><td><div class='test'>";
 echo "<a href='#' class='toggleTest' data-id='". $arr['id']."' id='test-" . $arr['id'] . "'>" . $arr['test2'] . "</a>";
 echo "</div></td></tr>";
}
echo "</tbody></table>";

jQuery

$(function(){
    $('.test').on('click', '.toggleTest', function(e){
        var id = $(this).data('id');
        $("#test-"+id).html("Done");
        return false;
    });
});

$(document).ready(function() {
    $('#paginatedTable').dataTable();
} );
javascriptphpjqueryhtmldatatables
22
Andrew

動的に追加できる行ではなく、静的要素にハンドラをバインドする必要があります。したがって、次のようになります。

$("#paginatedTable").on("click", ".test .toggleTest", function ...);
44
Barmar

@Barmarからの返信に従いました。

それに伴い、on clickをdocument.ready関数にラップしました。それでうまくいきました。

$(document).ready(function() {

$('#dmtable tbody').on( 'click', 'tr td.details-control', function () {

}
} );
4
Raghu

別の簡単な解決策 found は、コンポーネントハンドラーを使用してDataTablesの再描画でDOMをアップグレードする関数を追加するだけです。

次のように使用できます。

$(document).ready(function(){
    var table = $('#table-1').DataTable({ 
        "fnDrawCallback": function( oSettings ) {
            componentHandler.upgradeDOM();
        }
    });
});

いずれかの列でドロップダウンを使用していたときのページネーションの問題を解決しました。

2
David Hagan

ここで間違っている可能性のあることがいくつかあります。

  • イベントバインディングは、置換される要素上にあるため、次のようなものを使用する必要があります。
    $('#paginatedTable').on('click', '.toggleTest', function(e){
  • データを破壊する可能性があるため、htmlをエスケープしているようには見えません。
    htmlspecialchars($arr['test2'])
    （ちょうど$arr['test2']、他の変数にも適用できます）
0
jeroen