Привязка событий к элементам документа загруженных с помощью .ajax() 


Привязка событий к элементам документа загруженных с помощью .ajax()

Опубликовано

При работе с функцией для подгрузки контента jQuery.ajax(), да и при любых других изменений структуры DOM, могут возникнуть непредвиденные проблемы с обработчиками событий, попросту они не будут срабатывать.

Все дело в том, что события вешаются на уже существующие элементы веб-старницы. Последовательность тут примерно такова, изначально прогружается содержимое страницы, т.е. все блоки, абзацы, заголовки, ссылки. После загрузки всего документа на элементы веб-страницы вешаются обработчики событий: (.click(), .hover() .toggle() и др).

А теперь предположим, что у нас заранее подготовлен обработчик события .click() селектор которого указывает на пока не существующий элемент в документе, однако мы планируем подгрузить его с помощью функции $.ajax(). В результате после подгрузки контента с нужным элементом, легко убедится что событие .click() не срабатывает, по причине того, что на момент загрузки документа и его структурного формирования указанного элемента не существовало и событие, указывающее на несуществующий элемент как бы повисает в воздухе.

Чтобы это исправить существует простое решение, предоставляемое jQuery, плагин jQuery.Listen который отслеживает все события, и связывает их с указанными в его параметрах элементами документа.

Например, чтобы вывести сообщение на экран, при клике на элемент документа с уникальным id="Element", необходимо добавить следующий скрипт:

<script>
$.listen("click", "#Element", function(){
  alert(" Это сообщение отображается благодаря работе плагин jQuery.Listen ");
});
</script>