jQuery .live () vs .on () метод для додавання події клацання після завантаження динамічного html

Я використовую jQuery v.1.7.1, де метод .live () очевидно застарілий.

Проблема, яка у мене виникає, полягає в тому, що при динамічному завантаженні HTML в елемент за допомогою:

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

Якщо я спробую після цього додати подію натискання, вона не реєструє подію, використовуючи один із цих способів:

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

або

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

Який правильний спосіб досягти цієї функціональності? Мені здається, що для мене працює .live (), але я не повинен використовувати цей метод. Зауважте, що #child - динамічно завантажений елемент.

Дякую.

Якщо ви хочете, щоб обробник кліків працював для елемента, який динамічно завантажується, тоді ви встановлюєте обробник подій на батьківський об'єкт (який не завантажується динамічно) і даєте йому селектор, який відповідає вашому динамічному об'єкту на зразок цього:

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

Обробник подій буде приєднаний до #parentоб'єкта, і щоразу, коли подія натискає на нього, на якій виник #child, він запустить ваш обробник кліків. Це називається делегованою обробкою події (обробка події делегована батьківському об'єкту).

Це робиться таким чином, оскільки ви можете приєднати подію до #parentоб'єкта навіть тоді, коли #childоб’єкт ще не існує, але коли він пізніше існує та отримує натискання на нього, подія клацання буде міхувати до #parentоб'єкта, воно побачить, що воно виникло #childі є обробник подій для натискання #childта запуску вашої події.

Спробуйте це:

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

З $.on()документації:

Обробники подій прив'язані лише до обраних на даний момент елементів; вони повинні існувати на сторінці в той момент, коли ваш код робить дзвінок .on().

Ваш #childелемент не існує, коли ви дзвоните $.on()на нього, тому подія не пов'язана (на відміну від $.live()). #parentОднак вони існують, тому прив'язка події до цього нормальна.

Другий аргумент в моєму коді вище , діють як «фільтр» спрацьовують тільки в разі , якщо подія ого до #parentз #child.

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

EDIT: Я надаю трохи більше інформації про те, як це працює, тому що ... слова. На цьому прикладі ви розміщуєте слухача на весь документ.

Коли ви підбираєте clickбудь-який елемент (и) .selector, подія перетворюється на основний документ - доки немає інших слухачів, які називають event.stopPropagation()метод виклику, - який би перейшов у бульбашку події до батьківських елементів.

Замість прив’язки до певного елемента чи набору елементів ви слухаєте будь-які події, що надходять із елементів, які відповідають вказаному селектору. Це означає, що ви можете одночасно створити одного слухача, який автоматично відповідатиме існуючим елементам, а також будь-яким динамічно доданим елементам.

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

Редагувати:

Очевидно, що найближчий батьківський елемент, який ви можете слухати, краще, і ви можете використовувати будь-який елемент замість того document, щоб діти, за якими ви хочете стежити за подіями, були всередині цього батьківського елемента ... але це насправді не має нічого робити з питанням.

Еквівалент .live () у 1.7 виглядає так:

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

В основному, перегляньте документ для подій клацання і відфільтруйте їх для #child.

Я знаю, що відповідь трохи пізно, але я створив поліфункцію для методу .live (). Я тестував його в jQuery 1.11, і, здається, він працює досить добре. Я знаю, що нам слід застосовувати метод .on (), де це можливо, але у великих проектах, де неможливо перетворити всі .live () виклики в еквівалентні дзвінки .on () з будь-якої причини, може бути наступне робота:

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", а не жити. І коли я намагався використати це, я відчув проблему, як у вас.

На моїх сторінках я динамічно створюю рядки таблиць кнопок і багато матеріалів. але коли я користуюся магією, зник.

Інші рішення, такі як використовувати його, як дитина, просто викликають ваші функції кожного разу при кожному натисканні. Але я знаходжу спосіб зробити це повторним, і ось рішення.

Напишіть свій код:

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

Виклик виклику (); після створення об’єкта на цій сторінці.

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

Таким чином, ваша функція викликається, коли передбачається не кожне клацання сторінки.