на jQuery.жить() и на() метод для добавления события click после загрузки динамического HTML

Я с помощью jQuery В. 1.7.1 где .жить() метод явно устарел.

проблема, с которой я сталкиваюсь, заключается в том, что при динамической загрузке html в элемент с помощью:

$('#parent').load("http://..."); 

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

$('#parent').click(function() ...); 

или

// according to documentation this should be used instead of .live()
$('#child').on('click', function() ...); 

каков правильный способ достижения этой функциональности? Это только кажется, что работает .жить() для меня, но я не должен быть используя этот метод. Обратите внимание, что #child является динамически загружаемым элементом.

спасибо.

7 ответов


если вы хотите, чтобы обработчик click работал для элемента, который загружается динамически, вы устанавливаете обработчик событий на родительском объекте (который не загружается динамически) и даете ему селектор, который соответствует вашему динамическому объекту следующим образом:

$('#parent').on("click", "#child", function() {});

обработчик событий будет присоединен к #parent объект и в любое время событие щелчка пузырьки до него, который возник на #child, он запустит ваш обработчик щелчка. Это называется обработкой делегированных событий (событие обработка делегируется родительскому объекту).

это делается таким образом, потому что вы можете прикрепить событие к #parent объект, даже если #child объект еще не существует, но когда он позже существует и нажимается, событие click будет пузыриться до #parent объект, он увидит, что он возник на #child и есть обработчик событий для щелчка по #child и уволить ваше мероприятие.


попробуйте это:

$('#parent').on('click', '#child', function() {
    // Code
});

С $.on() документы:

обработчики событий привязаны только к выбранным элементам; они должен существовать на странице в то время, когда ваш код делает вызов .on().

код #child элемент не существует при вызове $.on() на нем, поэтому событие не связано (в отличие от $.live()). ,, тут exist, поэтому привязка события к этому штраф.

второй аргумент в моем коде выше действует как "фильтр" только для запуска, если событие пузырилось до #parent С #child.


$(document).on('click', '#selector', function() { /* do stuff */ });

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

когда вы click на любом элементе(элементах), соответствующем #selector, событие пузырится до основного документа - до тех пор, пока нет других слушателей, которые вызывают event.stopPropagation() method -- который бы довершил пузырение события к родительским элементам.

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

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


эквивалент .live () в 1.7 выглядит так:

$(document).on('click', '#child', function() ...); 

в основном, смотрите документ для событий щелчка и фильтруйте их для #child.


Я знаю, что немного поздно для ответа, но я создал polyfill для .жить() метод. Я тестировал его в jQuery 1.11, и он, похоже, работает довольно хорошо. Я знаю, что мы должны реализовать .метод on () везде, где это возможно, но в больших проектах, где невозможно преобразовать все .live () вызывает эквивалент .по () вызовам по любой причине может работать следующее:

if(jQuery && !jQuery.fn.live) {
    jQuery.fn.live = function(evt, func) {
        $('body').on(evt, this.selector, func);
    }
}

просто включите его после загрузки jQuery и перед вызовом live ().


.on () для jQuery версии 1.7 и выше. Если у вас есть более старая версия, используйте это:

$("#SomeId").live("click",function(){
    //do stuff;
});

я использовал "live" в своем проекте, но один из моих друзей предложил мне использовать " on " вместо live. И когда я попытался использовать это, у меня возникла проблема, как у вас.

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

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

написать код:

function caller(){
    $('.ObjectYouWntToCall').on("click", function() {...magic...});
}

Call caller (); после создания объекта на странице, как это.

$('<dom class="ObjectYouWntToCall">bla... bla...<dom>').appendTo("#whereeveryouwant");
caller();

таким образом, ваша функция вызывается, когда предполагается не каждый клик на странице.