Уроки JavaScript – не працюють події jQuery після AJAX завантаження
Якщо ви використовуєте AJAX на своєму сайті, майте на увазі, що такі події, як клік (click), надсилання (submit), наведення (hover), можуть не працювати, якщо ви не прикріпите їх правильно. У сьогоднішній статті ми розглянемо практичне рішення проблеми, коли не спрацьовують події в jQuery після динамічної зміни сторінки (або AJAX).
Опис задачі
Припустимо, у нас є блоки з заголовком і прихованим контентом в тегові <p>. По кліку на заголовку, прихований контент показується/ховається за допомогою функції toggle():
$('a.zagolovok').click(function(e){
e.preventDefault();
$(this).next('p').toggle();
});
Потім ми завантажуємо нові елементи (блоки) без перезавантаження сторінки за допомогою AJAX. Коли ми перезавантажуємо сторінку – все працює нормально, але якщо нові елементи завантажуються AJAX’ом, — не працює функція toggle().
Варіант рішення №1
Подія click прикріплюється до існуючих елементів після повного завантаження сторінки. Ключове слово тут – існуючих. Коли ми завантажуємо щось за допомогою AJAX, ми маніпулюємо DOM. Ми розміщуємо абсолютно новий елемент, який не існував при завантаженні сторінки. Тому нам потрібно прикріпити цю подію після підвантаження нового контенту. Якщо ви використовуєте функцію .load() (яка завантажує дані з сервера і розміщує повернутий HTML у відповідних елементах), вам просто потрібно помістити функцію click() у функцію зворотного виклику:
$('.blocks-wrapper').load(link.attr('href'), function(responseText, textStatus, XMLHttpRequest){
$('a.zagolovok').click(function(e){
e.preventDefault();
$(this).next('p').toggle();
});
});
Так ми прикріплюємо подію click і до нових доданих елементів.
Якщо ви використовуєте функцію .ajax() замість .load(), просто приєднайте подію до функції .done() (яка додає обробник, що буде викликатися при обробці відкладеного об’єкта) AJAX виклику.
Варіант рішення №2
Що робити, якщо ми не хочемо прикріплювати подію кожен раз, коли викликається AJAX? Для цього є інше, більш «глобальне» рішення. Ми можемо використовувати функцію .on().
Функція .click() схожа з .on('click'), але тут є одна важлива частина – при другій функції ми можемо делегувати подію. Перевага делегованих подій полягає в тому, що вони можуть обробляти події для елементів-нащадків, які додаються в документ пізніше (наприклад, при AJAX).
Тому замість того, щоб прикріплювати подію click в завершеному AJAX, ми просто додаємо її більш «глобально»:
$('.blocks-wrapper').on('click', 'a.zagolovok', function(e){
e.preventDefault();
$(this).next('p').toggle();
});
Ми могли б приєднати обробник і до тега <body>, але краще прикріплювати делеговані події якомога ближче до цільових елементів в документі. Потрібно уникати надмірного використання document або document.body для делегованих подій на великих сторінках з великим DOM.
Делеговану подію має бути приєднано до елементу, який існує на сторінці в той час, коли ваш код виконує виклик, і не змінюється під час AJAX викликів.
У більш ранніх версіях jQuery замість .on() використовувалися функції .live() (застаріла з версії jQuery 1.9) або .delegate() (застаріла з версії jQuery 3.0).
Останні пости
Чи варто купувати MacBook Air 13 M1: стислий огляд
Макбук Ейр — культова лінійка портативних комп'ютерів від Apple. Усі пристрої відрізняються витонченим дизайном, компактним… Читати далі
Просування в Інтернеті – 10 найбільш дієвих SEO тактик
Якщо ви власник веб-сайту, ви не можете дозволити собі нехтувати SEO. Окрім основ просування та… Читати далі
Які товари найбільш маржинальні
Високомаржинальні товари – це та категорія, яка забезпечує підприємству найвищий рівень прибутку через значну різницю… Читати далі
Як працює рішення SD-WAN: Основи технології та сфери застосування
У сучасному світі, де бізнеси намагаються вдосконалити свої мережі та забезпечити безперервний доступ до додатків… Читати далі
Які строки варто прописати у договорі про розробку програмного забезпечення, щоб зробити процес роботи комфортним та передбачуваним?
Чітке визначення термінів проекту формує очікування, зменшує ризик порушення дедлайнів та посилює продуктивність співпраці між… Читати далі
Комп’ютер: недорогий і функціональний водночас
Важко уявити собі роботу, розваги, спілкування та дозвілля без комп'ютера. Він допомагає у різних сферах… Читати далі