JQuery слушатель не «слушать» на события элементов DOM динамически создаваемые

Question

У меня есть слушателя, как это:

$('.delete').click(function() { 
    ...some stuff 
}); 

Кроме того, на той же странице, другой сценарий динамически добавлять элементы в DOM, таким образом, :

$('#list').append('<tr><td><a class="delete" href="#">delete</a></td></tr>'); 

Моя проблема заключается в том, что слушатель не «слушает» эти динамически созданные элементы.

Может ли кто-нибудь пролить свет, пожалуйста?

Answer 1

Он будет слушать только те элементы, которые существовали, когда вы связали обработчик событий. Если вы хотите, чтобы он прослушивал динамически созданные элементы, вы хотите использовать функцию live(), которая работает с текущими и будущими элементами.

EDIT: на JQuery 1.7, рекомендуемый способ состоит в использовании функции .on(), которая заменяет .bind(), .live() и .delegate(), обеспечивая все функциональные возможности, необходимые для прикрепления обработчиков событий.

Answer 2

Несомненно.

Динамический прослушиватель не является динамическим.

$('.delete').click(function() { 

Подключает слушателя ко всем существующим элементам.

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

В основном, новые элементы не получают выслушали, потому что вы не присоединять новые обработчик к ним;)

Answer 3

Да, проверить Живую функцию JQuery. Также помните, чтобы связывать и отвязывать события. были проблемы, когда связь продолжала получать привязку каждый раз, когда она была создана, но поскольку страница не перезагружалась, связь имела бы 5 или 6 кликов, связанных с ней, и вызывала проблемы. просто нужно было отвязать события по ссылке.

Answer 4

Связывание событий с элементом, который еще не существует, невозможно. То, как вы можете это достичь, как выразился Йогурт, использует «on» и указывает селектор, который вы хотите использовать в качестве второго параметра функции.

this.$someStaticParent.on('click', 'li', functionName); 

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