HTML-код дуже простий. Маємо два параграфа, кнопку, за допомогою якої будемо відправляти ajax-запит і елемент span, який буде використовуватися для вставки в нього текстових повідомлень.
Для початку зв'яжемо подія click з елементами p. За подією будемо виводити в alert текст, що міститься в даному параграфі.
Ajax-запит будемо виконувати при кліці на елементі button. Складного тут нічого немає - запит буде відправлений до файлу eventHandlingAjax.php, а перед відправкою ми вставимо відповідне повідомлення в елемент span, зробивши його видимим за допомогою CSS (спочатку цей елемент був прихований за допомогою того ж CSS). При отриманні відповіді від сервера ми вставимо повідомлення про це в той же елемент span і найголовніше, додамо в body то, що ми отримали в якості відповіді.
А що саме ми отримали можна буде дізнатися, подивившись код серверного сценарію.
Ми додамо в body всього-на-всього HTML-код ще одного параграфа.
Якщо Ви вже встигли випробувати цей приклад, то напевно відзначили ту обставину, що обробник події click діє тільки для тих двох параграфів, які були присутні на сторінці з самого початку. А для доданих параграфів цей обробник не діє. Чому? Давайте розбиратися.
Що відбувається далі? Далі ми відправляємо ajax-запит до сервера і отримуємо від нього в якості відповіді ще один елемент p, який вставляється в DOM. Ось це і є найважливіший момент - обробник події click по суті пов'язаний не з якимись елементами p на сторінці, а з конкретним об'єктом jQuery, в якому на даний момент знаходиться тільки два елементи p, які були присутні на сторінці спочатку. Доданий параграф в цей об'єкт jQuery не міг бути включений, оскільки тоді ще не існував, тому і обробник події click для нього працювати не буде.
Ну а тепер дізнаємося «Як це виправити?»
Я спеціально не став видаляти перший обробник події click, оскільки на цьому прикладі можна наочно побачити різницю між двома об'єктами jQuery, які містять елементи p. Перший з них був створений в момент завантаження html-сторінки і містить в собі два елементи p, а ось другий об'єкт jQuery створений вже після виконання ajax-запиту, і містить всі елементи p, які вдалося виявити в DOM, тобто після одного запиту буде три параграфа, після двох - чотири і так далі. Візуально існування двох об'єктів jQuery підтверджується тим, що при кліці на будь-якому з «доданих параграфів» Ви побачите тільки одне повідомлення в alert'е, а ось при кліці на першому або другому параграфі Ви побачите вже два alert'а - відповідно для першого і для другого об'єкта jQuery. Кількість об'єктів jQuery буде рости разом з кількістю виконаних ajax-запитів.
Можна піти іншим шляхом і прописати обробник події безпосередньо в файлі сценарію на сервері - в цьому випадку він також буде довантажуючи і відпрацює правильно. Принципової різниці між цими підходами немає.
Але насправді - це не зовсім правильний шлях. хоча в деяких випадках може виручити і таке рішення.
Я хочу розповісти про ще один можливий спосіб вирішення цього завдання, який полягає у використанні плагіна jQuery Listen. У коді дещо звичайно зміниться. Природно, що для використання цього плагіна, його необхідно підключити на сторінку:
Зверніть увагу, що замість нашого обробника події click на елементах p, ми використовуємо плагін jQuery Listen. передаючи йому подія, яке необхідно відстежувати, елементи, з якими ця подія необхідно пов'язати і функцію, яка буде виконана при настанні цієї події. Можете подивитися роботу плагіна - ось приклад.