Codul HTML este foarte simplu. Avem două paragrafe, un buton, cu care vom trimite o cerere ajax și un element de span, care va fi folosit pentru a insera mesaje text în el.
Pentru a începe, asociază evenimentul clic cu elementele p. După eveniment, vom emite pentru a avertiza textul conținut în acest paragraf.
Ajax-request va fi executat când faceți clic pe elementul butonului. Nimic complicat aici - cererea va fi trimisă la dosar eventHandlingAjax.php, și înainte de expediere, vom introduce un mesaj în intervalul de celule, făcându-l vizibil cu ajutorul CSS (inițial, acest element a fost ascuns utilizând același CSS). Atunci când primim un răspuns de la server, vom introduce un mesaj despre el în același element span și, cel mai important, vom adăuga corpului ceea ce am primit ca răspuns.
Și exact ce am obținut se poate găsi prin analizarea codului de script al serverului.
Vom adăuga în corp doar codul HTML al unui alt paragraf.
Dacă ați experimentat deja acest exemplu, probabil ați observat că instrumentul de procesare a evenimentului clic funcționează doar pentru acele două paragrafe care au fost prezente pe pagina încă de la început. Și pentru paragrafe adăugate, acest manipulator nu funcționează. De ce? Să înțelegem.
Ce se întâmplă în continuare? Apoi trimitem ajax-request către server și obținem ca răspuns un element mai mult p, care este inserat în DOM. Acesta este cel mai important punct - faceți clic pe handler eveniment nu este de fapt legat de orice elemente p de pe pagină, și cu obiectul specific al jQuery, care este în prezent, la numai două elemente p, care au fost prezente pe pagina inițial. Paragraful adăugat în acest obiect jQuery nu a putut fi inclus, deoarece nu exista încă, astfel încât instrumentul de procesare a evenimentului pentru clic nu ar funcționa.
Ei bine, acum învățăm "Cum pot remedia asta?"
Nu am șters în mod intenționat primul manipulator de evenimente pentru clicuri, deoarece în acest exemplu pot vedea clar diferența dintre cele două obiecte jQuery care conțin elementele p. Primul a fost stabilit la momentul descărcării HTML-pagini și conține două elemente p, dar al doilea obiect jQuery este creat după efectuarea ajax-cerere, și conține toate elementele p, care a fost găsit în DOM, și anume după o cerere, vor fi trei paragrafe, după două - patru și așa mai departe. Vizual, există două obiecte de jQuery este confirmată de faptul că, atunci când faceți clic pe oricare din „secțiunile Adăugați“ veți vedea doar un singur mesaj în alert'e, dar atunci când faceți clic pe primul sau al doilea paragraf, veți vedea pentru două alert'a - pentru prima și pentru al doilea obiect jQuery. Numărul de obiecte jQuery va crește împreună cu numărul de solicitări ajax executate.
Puteți merge invers și puteți înregistra evenimentul de manipulare a evenimentelor direct în fișierul script de pe server - în acest caz, acesta va fi, de asemenea, încărcat și funcționat corect. Nu există o diferență fundamentală între aceste abordări.
Dar de fapt - aceasta nu este calea cea bună. deși în unele cazuri această soluție poate fi câștigată.
Vreau să vorbesc despre un alt mod posibil de a rezolva această problemă, și anume să folosesc pluginul jQuery Listen. În cod, ceva se va schimba. Firește, pentru a utiliza acest plugin, acesta trebuie să fie conectat la pagină:
Rețineți că în locul manipulatorului evenimentului de clic pe elementele p, vom folosi pluginul jQuery Listen. trecând un eveniment care trebuie urmărit, elementele cu care acest eveniment trebuie asociat și o funcție care va fi executată la apariția acestui eveniment. Puteți vedea plugin-ul - aici este un exemplu.
Articole similare
Trimiteți-le prietenilor: