Supponiamo di voler fare in modo che quando clicchiamo su un h3, cambiamo il colore di sfondo dell'elemento
Javascript code:
$(document).ready(function() {
$('h3').click(function() {
$(this).toggleClass('highlighted');
});
});
Facendo eseguire questo codice vedremo che funzionerà sì sulle lettere a sinistra, ma non sui lemmi del nostro vocabolario, che sono anch'esse degli h3. Questo succede perchè al caricamento della pagina, quando viene fatto il bind degli eventi agli elementi, in realtà ancora quei lemmi non sono presenti, dato che li carichiamo quando premiamo i bottoni delle singole lettere.
Dovremo dunque fare in modo di riassegnare gli eventi ogni volta che carichiamo i dati dall'esterno
Javascript code:
$(document).ready(function() {
var bindBehaviors = function() {
$('h3').click(function() {
$(this).toggleClass('highlighted');
});
};
bindBehaviors();
$('#letter-a .button').click(function() {
$('#dictionary').hide().load('a.html', function() {
bindBehaviors();
$(this).fadeIn();
});
});
});
Analizziamo il codice:
Provando questo codice vedrò che questa volta funziona, ma solo la prima volta, questo perchè di fatto finisco per assegnare due handler che fanno la stessa cosa allo stesso elemento annullando così l'effetto toggle
Per risolvere il problema posso usare una caratteristica del metodo $(), il quale è in grado di ricevere un parametro extra che indica lo scope in cui si va a cercare un certo elemento:
$(document).ready(function() {
var bindBehaviors = function(scope) {
$('h3', scope).click(function() {
$(this).toggleClass('highlighted');
});
};
bindBehaviors(this);
$('#letter-a .button').click(function() {
$('#dictionary').hide().load('a.html', function() {
bindBehaviors(this);
$(this).fadeIn();
});
});
});
In questo modo ogni volta assegnerò l'evento giusto al rispettivo elemento
Un metodo assai più rapido attraverso il quale avrei potuto fare la stessa cosa è attraverso l'event bubbling, cioè la propagazione deli eventi, assegnando il click all'intero body e poi facendo l'inspect del target su cui ho premuto il mouse:
Javascript code:
$(document).ready(function() {
$('body').click(function(event) {
if ($(event.target).is('h3')) {
$(event.target).toggleClass('highlighted');
}
});
});