Почему обработчик события не работает после сортировки таблицы

Question

Я использую jQuery DataTables, и у меня есть таблица, которая создается с использованием цикла foreach. В каждой сгенерированной строке 2 кнопки создаются с другим номером, добавленным к атрибуту data.

После того, как страница загружается, dataTables загружает и отображает таблицу. У меня есть обработчик onClick, который реагирует на кнопки при нажатии.

Однако, когда я сортирую столбцы таблицы, которые могут выполнять dataTables, кнопки просто не отвечают на обработчик onClick.

Что я могу сделать, чтобы предотвратить повреждение dataTables, чтобы кнопки ничего не делали при использовании любого из столбцов сортировки?

Answer 1

Не используйте $('.button').click, потому что эти кнопки воссозданы при сортировке, вместо этого использовать on события Jquery

$(document).on('click', '.button',function(){ 
    //your code 
}); 

Answer 2

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

Ниже приведен пример кода, который нужно обновить, чтобы соответствовать вашей структуры:

$('#example tbody').on('click', '.button', function(e){ 
    // your code 
}); 

Заменить example с ID атрибута вашей таблицы и заменить .button с соответствующим селектором CSS для ваших кнопок.

Для получения дополнительной информации см. jQuery DataTables – Why click event handler does not work.