JQuery.on('click') не работает в DataTables 2-я страница или строки за 11

У меня есть ссылка jQuery, которая запускается в динамическом списке для каждой строки при нажатии гиперссылки.

Это работает до того, как применяются данные, но как только datatables применяется к 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();
} );

Ответ 1

Вам нужно привязать обработчик к статическому элементу, а не к строкам, которые можно добавить динамически. Поэтому это должно быть:

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

Ответ 2

Другим простым решением, которое я просто нашел, является просто добавление функции, которая использует обработчик компонента для обновления DOM при перерисовке DataTables.

Может использоваться как:

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

Он решил проблемы с разбивкой по страницам, когда я использовал раскрывающийся список в одном из столбцов.

Ответ 3

Здесь есть несколько вещей, которые могут пойти не так:

Связывание событий связано с заменяемыми элементами, вы должны использовать что-то вроде:
$('#paginatedTable').on('click', '.toggleTest', function(e){
Вы, кажется, не избегаете своего html, чтобы данные могли его сломать:
htmlspecialchars($arr['test2'])
(вместо $arr['test2'], может применяться и к другим переменным)

Ответ 4

Я последовал за ответом @Barmar.

вместе с тем, я обернул клик в функцию document.ready, затем он работал у меня.

$(document).ready(function() {

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

}
} );