Keskustelu: Nettisivujen teko: JQuery ja attribuuttien asettaminen dynaamisesti

Kun klikkaan 'follow'-id:llä olevaa buttonia, koodissani asetan tämän buttonin id:ksi 'unfollow' ja muutan sen tekstiä. Toinen eventhandlerini huolehtii siitä, että kun klikkaan elementtiä, jonka id on 'unfollow', se tekee asioita. Mutta, kun olen klikannut follow-buttonia ja yritän klikata sitä uudelleen (sen id on muutettu 'unfollowiksi'), jquery ei rekisteröi 'unfollow':in klikkausta. Kun lataan sivun uudelleen, ja klikkaan 'unfollow'-buttonia, se toimii (asetan php:llä buttonin id:n 'unfollow':iksi jos kirjautunut käyttäjä seuraa käyttäjää, jonka profiilisivulla ollaan).
Ja selaimen elementtien tutkijassa id:n muutos kyllä näkyy aivan oikein ja heti, kun klikkaan 'follow'-buttonia.

Joten, tuntuu että jquery toimii jotenkin kummallisesti, mutta voi vika olla koodissani. Tai kyse voi olla jqueryn toimintatavasta.

$(document).ready(function(){
	$('#follow').click(function(){
		$.post('...', { following: $(this).attr('data-following'), follower: $(this).attr('data-follower')}, function(data){
			$('#follow').attr('id', 'unfollow');
			$('#unfollow').empty().text('Älä seuraa');
		});
	});

	$('#unfollow').click(function(){
		$.post('...', { following: $(this).attr('data-following'), follower: $(this).attr('data-follower')}, function(data){
			$('#unfollow').attr('id', 'follow');
			$('#follow').empty().text('Seuraa');
		});
	});
});

jQuery ei maagisesti tunnista klikkausvaiheessa, mitä attribuutteja elementillä on ja mitä käsittelijöitä pitää kutsua. Käsittelijä asetetaan vain niille elementeille, jotka valitset asetusvaiheessa. Koska $("#unfollow") ei koske aluksi yhtäkään elementtiä, käsittelijää ei aseteta. Toisaalta taas ensimmäinen käsittelijä pysyy liitettynä elementtiin, vaikka elementin id vaihtuukin.

Nykyiseen ratkaisumalliisi on kyllä olemassa ratkaisu, mutta sen käyttö ei ole kovin järkevää, koska jQueryn täytyy silloin jokaisella klikkauksella selvittää, mihin klikkaus osui ja pitääkö jotain tehdä.

$(document).on("click", "#follow", funktio_1);
$(document).on("click", "#unfollow", funktio_2);

Helpompaa ja tehokkaampaa on käyttää vain yhtä käsittelijää. Suunnan voi säilyttää helposti esimerkiksi erillisessä muuttujassa tai elementin luokkana; luokat ovat käteviä, jos elementin ulkonäköä pitää kuitenkin CSS:llä muuttaa.

$("#follow").click(function() {
	var enable = $(this).toggleClass("following").hasClass("following");
	if (enable) {
		alert("start (#follow.following)");
	} else {
		alert("quit (#follow / #follow:not(.following))");
	}
});

Muuttujalla koodi vähän lyhenee.

var following = false;
$("#follow").click(function() {
	following = !following;
	if (following) {
		alert("start");
	} else {
		alert("quit");
	}
});

Toki voit myös kikkailla id:llä, mutta minusta se ei ole tyylikästä.

Kiitos paljon Metabolixille, tuolla sain toimimaan.