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

CODE:
  1. <a href="#" class="button_close">chiudimi</a>
  2. <script>
  3. $(document).ready(
  4.     function ()
  5.     {
  6.         $('a.button_close').bind('click', function(){$(this).hide();});
  7.     });
  8. </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è:

CODE:
  1. <a href="#" class="button_close">chiudimi</a>
  2. <a href="#" class="button_crea">crea</a>
  3. <script>
  4.  
  5. $(document).ready(
  6.     function ()
  7.     {
  8.         bindings();
  9.     }
  10. );
  11.  
  12. function bindings()
  13. {
  14.     $('a.button_close').bind('click', function(){$(this).hide();});
  15.     $('a.button_crea').bind('click', creaQualcosa);
  16. }
  17.  
  18. var creaQualcosa = function(){
  19.     // crea qualcosa
  20.     bindings();
  21. }
  22. </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.

CODE:
  1. function bindings()
  2. {
  3.     // rimuovo tutti i bindings per poterli ricreare aggiornati
  4.     $('*').unbind();
  5.  
  6.     // da qui in poi creo tutti i bindings necessario
  7. }

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

Tagged with:
 

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

phpDay 15.16 Maggio 2009 a Verona