Keskustelu: Nettisivujen teko: jQuery onkelmaa

Uusi threadi. Shoot me.

Meillä on vaikkapa seuraavanlainen rakenne:

<div id="foo">
    <div>This will be replaced soon.</div>
    <a href="this_will_be_prevented.php" class="link">Go do some Ajax</a>
</div>

Ja seuraavanlainen javascriptin pätkä:

$(document).ready(function() {
	$('.link').click(function(e) {
		e.preventDefault();
		$.post(
			'ajaxfile.php',
			{/* post vars */},
			function(data){
				$('#foo').empty();
				$('#foo').append(data);
			},
			'html');
	});
});

Eli siis, <div id="foo">:n sisällä on linkki, jossa on klik-eventti. Kun linkkiä klikataan, palautuu datana täsmälleen sama ritirampsu kuin foo:n sisällä on nytkin. Edelliset tyhjätään ensin. (Juu, replaceWith olisi kätevämpi, mutta tämä on vain esimerkki.) Palautuvassa HTML:ssä on siis sama linkki, jossa on sama css-luokka, joten sen _pitäisi_ klikatessa laukaista sama meininki uudelleen. Mutta eipä teekkään niin. Olen nyt sitten semmoisessa käsityksessä, että tuo $(document).ready -juttu luo oman puun, johon pääsee käsiksi $:llä. $('#foo').empty() poistaa tästä luodusta listasta elementtejä, mutta $('#foo').append(data) ei lisää puuhun elementtejä, joilla on luokat ja mitkä lie ja joita pystyy uudestaan kähmimään samalla $:n instanssilla.

Onko näin? Ja mitä voi tehdä että ei olisi näin?

Käytä click-metodin sijaan live-metodia. Vika lienee juurikin kuten sanoit, eli click toimii vain senhetkisille nodeille kun taas live toimii myös myöhemmin luoduille.

Pitää kokeilla. Ajatusmallissani oli tosin sekin virhe, että käytännössähän $.('selektori').click vaikuttaa suoraan elementin onClick-eventtiin, eli jos kyseinen node katoaa, niin mitäs muutakaan voi tapahtua, kuin että toiminnallisuus katoaa. Tyhmä minä.

Triskal kirjoitti:

Ajatusmallissani oli tosin sekin virhe, että käytännössähän $.('selektori').click vaikuttaa suoraan elementin onClick-eventtiin, eli jos kyseinen node katoaa, niin mitäs muutakaan voi tapahtua, kuin että toiminnallisuus katoaa.

Niin siis tämähän juurikin se sama asia, jonka mainitsit ensimmäisessäkin viestissä — puita ja elementtejä. Joskaan en jQueryn sisäistä sielunelämää tunne, mutta käytännössä sama: tuo click vaikuttaa vain sillä hetkellä valitsimen löytämiin elementteihn kun taas live ottaa huomioon myös myöhemmin dynaamisesti luodut elementit.

Jeah. Oli miten oli, live teki elämän huomattavasti helpommaksi. Eli vinkki oli. Thänks.