DOM не отвечает на запросы jquery после загрузки

Question

У меня есть простая страница, которая загружает контент динамически. Я использую функцию загрузки jQuery для добавления содержимого в div. Функция загрузки загружает контент из другого файла. У меня проблема в том, что после загрузки контента встроенные функции jQuery не отвечают на события click.

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

Answer 1

Когда вы делаете что-то вроде этого:

$("selector").click(function() { ... });

... только элементы, которые уже в DOM, будут сопоставлены селектором, и их событие щелчка будет подключено;если позже вы добавите элементы, которые будут иметь , совпадающие с селектором, они не будут автоматически подключены после факта.

Вы можете использовать делегирование событий, чтобы, казалось бы, автоматически подключить их, используя delegate или (с более новыми версиями jQuery) один из вариантов on:

$("container_for_elements").delegate("selector", "click", function() { ... }));
$("container_for_elements").on("click", "selector", function() { ... }));

(Обратите внимание, что порядок аргументов немного отличается междудва.)

С делегированием события, что действительно происходит, так это то, что jQuery перехватывает click на контейнере , и когда клик поднимается до контейнера, он проверяет путь к событиюпотребовалось, чтобы увидеть, соответствует ли какой-либо из промежуточных элементов селектору.Если это так, он запускает обработчик, как если бы вы подключили его к элементу, даже если он фактически подключен к контейнеру.

Конкретный пример:

<div id="container">
    <span>One</span>
    <span>Two</span>
    <span>Three</span>
</div>

Если мы сделаем это:

$("#container").delegate("span", "click", function() {
    console.log($(this).text());
});

... затем щелкнув один из промежутков, вы увидите его содержимое, и если мы сделаем это:

$("#container").append("<span>Four</span>");

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

Answer 2

Как вы можете видеть в документации jQuery :

Часто, когда вы добавляете обработчик щелчка (или другого события) ко всем ссылкам, используя $ ('a'). Click (fn), вы обнаружите, что события больше не работают после того, как вы загрузили новый содержимое страницы, используя запрос AJAX.

Когда вы вызываете $ ('a'), он возвращает все ссылки на странице во время ее вызова, и .click (fn) добавляет ваш обработчик только к этим элементам. Когда новые ссылки добавляются, они не затрагиваются. См. AJAX и Учебное пособие по событиям для более подробного обсуждения.

У вас есть два способа справиться с этим:

Использование делегирования события

Делегирование событий - это метод, использующий всплытие событий для захвата событий в элементах в любом месте DOM.

Начиная с jQuery 1.3, вы можете использовать методы live и die для делегирования событий с подмножеством типов событий. Начиная с jQuery 1.4, вы можете использовать эти методы (наряду с делегированием и отменой делегирования, начиная с 1.4.2) для делегирования событий практически с любым типом события.

Для более ранних версий jQuery взгляните на плагин Live Query от Brandon Aaron. Вы также можете вручную обработать делегирование событий, связавшись с общим контейнером и прослушивая события оттуда. Например:

$('#mydiv').click(function(e){
    if( $(e.target).is('a') )
       fn.call(e.target,e);
});
$('#mydiv').load('my.html');

Этот пример будет обрабатывать клики на любом элементе в #mydiv, даже если они еще не существуют, когда добавлен обработчик кликов.

Использование привязки события

Этот метод требует, чтобы вы вызывали метод bind для новых элементов по мере их добавления. Например:

$('a').click(fn);
$('#mydiv').load('my.html',function(){
    $('#mydiv a').click(fn);
});

Answer 3

Поскольку вы вставляете контент ПОСЛЕ того, как DOM полностью загружен, вы должны использовать .on("click",function(){}), чтобы реализовать функцию щелчка, потому что в то время, когда вы связываете их, они недоступны в DOM!