Добавление событий 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.