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

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

Дело в том, что у меня на странице две разные таблицы (с разными идентификаторами), которые создаются динамически (с помощью PHP и извлекают информацию из phpMyAdmin). Последняя из каждой строки в первой таблице содержит 6 (2 скрытых) разных кнопок (элементов) для обработки разных событий. Эти события запускаются функциями jQuery, содержащимися в моем файле edit_user.js

Одно из этих событий стирает строку, из которой был выбран элемент, и добавляет информацию во вторую таблицу как новую строку.

Как и в таблице 1, последний из таблицы 2 включает в себя 2 разные кнопки (тоже элементы) с различными функциями. Одна из этих функций делает полную противоположность функциональности, прокомментированной ранее: Возвращает соответствующую строку в Таблицу1.

Все работает хорошо, за исключением тех недавно вставленных строк, потому что элементы a ничего не делают.

Я прочитал о делегировании и изменил способ, которым мой файл прослушивает эти клики, но я все еще не могу заставить его работать:

    $(document).ready(
function() {
// Set handlers for myTable
$('table#myTable td').on('click','a.userErase',erase)
.on('click','a.userEditable',edit)
.on('click','a.userSuspend',suspend);

// Set handlers for suspTable
$('table#suspTable td ').on('click','a.userErase',erase)
.on('click','a.userResume',resume);
});

Моя проблема в основном с двумя функциями, продолжить а также приостановить, потому что именно они создают новые строки в таблицах, но я предполагаю, что они не делегируют, потому что новые строки вызывают разные функции:

Таблица 1
изображение table1

Таблица 2
Изображение Table2

Для лучшего понимания у меня есть следующие функции в каждой таблице:

Таблица 1

  1. редактировать
  2. изменить пароль
  3. приостановить
  4. стирать
  5. accept_edit (отображается только при редактировании)
  6. cancel_edit (отображается только при редактировании)

Таблица 2

  1. продолжить
  2. стирать

Я генерирую новые строки с помощью такого кода (он работает хорошо, но обработчик не попадает на событие):

    // create a row with the info to add in suspendedTable
var html = "<tr data-row-no=" + nextIndex + " height=\"35\"><td><div    contentEditable=\"false\" style=\"width: 100%; height: 100%;\">"+ pName
+ "</div></td><td><div contentEditable=\"false\" style=\"width: 100%; height: 100%;\"> "+ pSurname
+ "</div></td><td><div contentEditable=\"false\" style=\"width: 100%; height: 100%;\"> "+ pEmail
+ "</div></td><td><div contentEditable=\"false\" style=\"width: 100%; height: 100%;\"> "+ pUsername
+ "</div></td><td align=\"center\"> <a class=\"userResume\" id=\"resume-"+user_id + "\" href=\"#\" title=\"Activar l'usuari\">"+ "<i class=\"fa fa-smile-o\"></i></a></td><td align=\"center\"> <a class=\"userErase\" id=\"erase-"+user_id + "\" href=\"#\" "+ "title=\"Eliminar l'usuari\"><i class=\"fa fa-trash\"></i></a></td></tr>\n"
$('#suspTable tr:last').after(html);

Функциональность в порядке, если я обновляю страницу, все работает нормально, но до этого момента я не могу заставить эти новые строки работать должным образом.

Есть ли способ вызвать функцию непосредственно из этих вновь сгенерированных строк (например, onClick в JavaScript)? (Я пытался, но ни один не работал).

Заранее спасибо,

0

Решение

Вы просто делегировали свои события слишком глубоко. Добавьте обработчик на table а не на td:

$('table#myTable').on('click','a.userErase',erase)...

Так как #myTable остается на странице, и событие привязывается к нему, оно будет ловить щелчки внутри нее, и для вновь созданных строк.

0

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]