PHP Lang
  1. PHP Lang
  3. JQuery .on ('click') не работает в DataTables 2-я страница или строки за 11
Intereting Posts
Уничтожение данных PHP – MySQL Данные PHP EXIF ​​не работают Instagram Realtime update tag – получение пустых данных, почему? Выключить предупреждения и ошибки на php / mysql Являются ли PHP MySQLi подготовленными запросами с привязанными параметрами? PHP GD Допустимый размер памяти исчерпан Codeigniter и кодировки Проблема с исполняемой средой PHP с «gcloud preview app» при работе в Linux Кто-нибудь когда-либо использовал отладку PHP (unset)? Создайте однобитовое растровое изображение (монохромное) в php Получить данные из mysql по php для создания графического графика Чтобы добавить остаток электронной почты в yii, используя crontab Почему mysql_escape_string сильно обескуражен? Измените URL-адрес .php с идентификатором на .html Наличие нескольких значений в теге <option>?

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(); } );

Надежное обнаружение браузера с помощью javascript?Простое обнаружение смартфонаИзмените содержимое DIV с помощью ajax, php и jQueryперезагрузите страницу с помощью ajax, чтобы создать живой чатMySQL, PHP, JavaScript UTF-8 Проблема с шведскими буквами (все протестировано - ничего не работает)

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

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

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

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

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

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

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

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

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

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

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