Различные методы ajax
принимают обратный вызов, где вы можете привязать обработчики к новым элементам.
Вы также можете использовать делегирование события с delegate()
[документы] метод или live()
[документы] метод.
Концепция делегирования событий заключается в том, что вы не привязываете обработчик к самому элементу, а к некоторому родительскому контейнеру, который существует при загрузке страницы.
События всплывают изэлементы внутри контейнера, и когда он достигает контейнера, запускается селектор, чтобы увидеть, должен ли элемент, получивший событие, вызывать обработчик.
Например:
<div id="some_container"> <!-- this is present when the page loads -->
<a class="link">some button</a> <!-- this is present when the page loads -->
<a class="link">some button</a> <!-- this is present when the page loads -->
<a class="link">some button</a> <!-- this is present when the page loads -->
<a class="link">some button</a> <!-- this one is dynamic -->
<a class="link">some button</a> <!-- this one is dynamic -->
<a class="link">some button</a> <!-- this one is dynamic -->
<span>some text</span> <!-- this one won't match the selector -->
<span>some text</span> <!-- this one won't match the selector -->
</div>
Live Пример: http://jsfiddle.net/5jKzB/
Таким образом, вы привязываете обработчик к some_container
и передаете селектор к .delegate()
, который в данном случае ищет "a.link"
.
Когда элемент, соответствующий этому селектору, щелкается внутри some_container
, вызывается обработчик.
$('#some_container').delegate('a.link', 'click', function() {
// runs your code when an "a.link" inside of "some_container" is clicked
});
Таким образом, вы можетеобратите внимание, что не имеет значения, когда элементы "a.link"
добавляются в DOM, пока существует some_container
при загрузке страницы.
live()
[docs] метод тот же, за исключением того, что контейнером является document
, поэтому он обрабатывает всех кликов на странице.
$('a.link').live('click',function() {
// runs your code when any "a.link" is clicked
});