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

Question

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

Чтобы доказать, что он работает в противном случае, я включаю содержимое и после загрузки 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

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

Answer 3

Как вы можете видеть на jQuery's documentation:.

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

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

У вас есть два способа обработки этого:

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

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

Начиная с jQuery 1.3, вы можете использовать методы live и die для делегирования событий с подмножеством типов событий. Начиная с jQuery 1.4, вы можете использовать эти методы (вместе с делегатом и undelegate, начиная с 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, даже если они еще не существуют, когда добавляется обработчик щелчка.

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

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

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