AJAX tartalom és a kattintás

img

Nem tudom ki szokott jQueryzni. Azon belül ajaxozni és új elemeket létrehozni az adott oldalon.

Nah most miért is van ilyenkor gond? Addig míg csak simán új diveket, táblázatokat vagy akár új sorokat, adatokat kérsz az oldalra, addig nincs baj. De mi van, ha egy új kattintható elemet szeretnél click event handlerrel? Szopacs. Legalábbis azt hiszed elrontottál valamit, mert nem lehet kattintani.

De WHY?

A jQuery azokra az elemekre csücsül rá event handlerrel, melyek az oldal létrehozásakor is léteznek a DOMban. Tehát az újonnan létrehozott elemeket nem “látja”. Így jártam én is valamelyik nap, mikor felbosszantottam magam, mert eddig kattintható elemekkel nem nagyon volt bajom, de 1-2 napja beleakadtam ebbe a problémába. A kód kiveszi egy div tartalmát, majd visszailleszti apróbb módosítások után. Ekkor mivel a divben 2 kattintható elem is van, a teljes felület használhatatlanná vált. 10perc nézelődés után rájöttem, hogy itt nem én néztem el valamit, mert a kód jó. “Hádde’ akkor mér’ nem lásssa eza …”?

Hát mutassuk meg neki!

Elsőre rájöttem, hogy a jQuery működésében van a "gond", így rá is kerestem, hogy ezt hogyan lehet orvosolni. Ekkor találtam egy fontos sort, amit feljebb is említettem: a jQuery csak a betöltődésekor létező DOM elemekre teszi rá az event handlereit.

Mivel én a legújabb jQueryvel dolgozom (szinte mindig), így nekem egy aprócska függvény adja a megoldást:

.on();

például:

on('click', 'div.close', function(){
    $('.closethis').css('display', 'none');
});

Tehát tegye rá a click event handlert a close osztályú div elemre, majd hide-olja az összes olyan elemet ami class=”closethis”.

Ezt a pár sort az ajax frissítés után meghívva egyből újra működőképes lett a fent említett 2 kattintható elemem.

Az on() az 1.7es jQuerytől létezik.

Előtte más függvény hívással lehetett ezt megoldani:

.bind(); – 1.0-tól benne van, kibővítették 1.4 és 1.4.3 verzióknál

.delegate(); – 1.4.2-től került be, kibővítették 1.4.3 verziónál

.live(); – 1.3-tól került be, kibővítették 1.4 és 1.4.3 verzióknál

Linkek:

Bővebb leírás

.on()-ról:

jQuery On

.bind()-ről:

jQuery Bind

.delegate()-ről:

jQuery Delegate

.live()-ról:

jQuery Live