Binding degli eventi con jQuery

Una delle cose più comode di jQuery è quella di poter associare dinamicamente a particolari azioni dell’utente eventi in js grazie alla funzione bind().

Ad esempio se vogliamo far si che ad un click su un particolare link parta una animazione ci basterà scrivere

<a href="#" class="button_close">chiudimi</a>
<script>
$(document).ready(
	function () 
	{ 
		$('a.button_close').bind('click', function(){$(this).hide();});
	});
</script>

il problema dei binding però nasce nel momento in cui vogliamo generare nuovi elementi ai quali applicare “al volo” tutti i trigger precedentemente creati.

L’unica opzione (da me trovata, se ne avete altre comunicatemele!) è quella di far ricaricare (dopo una azione di creazione di nuovi elementi) una funzione che contiene tutti i binding utilizzati.

cioè:

<a href="#" class="button_close">chiudimi</a>
<a href="#" class="button_crea">crea</a>
<script>

$(document).ready(
	function () 
	{ 
		bindings();
	}
);

function bindings()
{ 
	$('a.button_close').bind('click', function(){$(this).hide();});
	$('a.button_crea').bind('click', creaQualcosa);
}

var creaQualcosa = function(){
	// crea qualcosa
	bindings();
}
</script>

Il problema di questa soluzione è che i bindings precedentemente creati per gli elementi già presenti nella pagina non vengono sovrascritti con il risultato di vedersi eseguito ogni trigger ad una ^2 volte (si potenza di 2!) per elemento creato.

La soluzione è semplice, basta infatti inserire all’interno della funzione bindings() il metodo unbind() che fa da distruttore.

function bindings()
{ 
	// rimuovo tutti i bindings per poterli ricreare aggiornati
	$('*').unbind();

	// da qui in poi creo tutti i bindings necessario
}

Il tutto facendo particolare attenzione a non creare/gestire trigger al di fuori di questa funzione.

Per curiosità, qualcuno ha risolto in altro modo?

update
la soluzione qui proposta non funziona un granchè con il plugin Interface.js, peccato! :(

ciuaz

%d bloggers like this: