Добавление событий jQuery для динамически добавленного контента
У меня есть таблица с несколькими строками и столбцами, заполненными php и mySQL. Для некоторых из td я добавляю jQuery click-events в функцию document.ready, чтобы пользователь мог изменить содержимое.
Но у меня также есть опция для добавления строк в таблицу и заполнения их вручную. Но поскольку строки, которые я добавляю, в документе не готовы, они не получат обработчик события щелчка, и поэтому я не могу щелкнуть их, чтобы получить поля ввода.
<table>
<tr>
<td class="clickable">Some info</td>
<td class="clickable">Some more info</td>
<td>Unchangable info</td>
</tr>
... more similar rows ...
</table>
а затем jQuery
$("tr.clickable").click(function() {
//add input fields
}
$("span#addNewRow").click(function() {
$("table").append('<tr><td class="clickable"></td> ... </tr>')
}
Ответы
Ответ 1
Вы хотите использовать живые события, которые были введены в 1.3.
$("tr.clickable").live("click", function() {
//add input fields
});
$("span#addNewRow").live("click", function() {
$("table").append('<tr><td class="clickable"></td> ... </tr>')
});
UPDATE: Обратите внимание, что с jQuery 1.7, live()
устарел. Вместо этого используйте on()
. И в некоторых случаях delegate()
может быть лучшим выбором. См. Комментарии ниже.
Пример использования .on()
:
$("table").on("click", "tr.clickable", function() {
//add input fields
});
Ответ 2
Вы можете использовать функцию .delegate(), которая привязывает обработчик к одному или нескольким событиям для всех элементов, которые соответствуют селектору, сейчас или в будущем, на основе определенного набора корневых элементов.
Ответ 3
Используйте live обработчик событий. Он не обрабатывает все события, но обрабатывает событие click. Обработчик будет привязан ко всем текущим и будущим элементам, которые соответствуют селектору.
$('tr.clickable').live( 'click', function() {
...
});
Ответ 4
Вам нужно будет добавить слушателей событий после того, как будут вставлены элементы.
Если вы используете JQuery, вы можете использовать библиотеку jQuery livequery, которая позволяет добавлять события к элементам, которые еще не были добавлены dom, чтобы вам не приходилось повторять события, когда вы вставляете что-то новое в dom.