jQuery .slideToggle() répéter

Question

Mon code jQuery est la suivante:

$('.sidebar_options_arrow').click(function() { 
    id = $(this).attr('rel'); 
    toggled = 0; 
    if(toggled == 0) { 
     toggled = 1; 
     $('#'+id+'-info').slideToggle('fast', function() { 
      alert('1'); 
      toggled = 0; 
     }); 
     $('.chat_sidebar_desc').not($('#'+id+'-info')).slideUp('fast'); 
    } 
    return false; 
}); 
$('#chat_sidebar ul li').click(function() { 
    id2 = $(this).attr('rel'); 
    if(loading == 0) { 
     loading = 1; 
     $('#chat_main_container').fadeOut(function() { 
      $('#loading').fadeIn(function() { 
       if(id2 == 0) { 
        $('#chat_main_container').empty().load('chat/start.php'); 
        $('#loading').delay(500).fadeOut(function() { 
         loading = 0; 
         $('#chat_main_container').fadeIn(); 
        }); 
       }else{ 
        $('#chat_main_container').empty().load('chat/index.php?roomid='+id2); 
        $('#loading').delay(500).fadeOut(function() { 
         loading = 0; 
         $('#chat_main_container').fadeIn(); 
        }); 
       } 
      }); 
     }); 
    } 
    return false; 
}); 

La question que je vais avoir est la suivante:

• je clique sidebar_options_arrow et il fonctionne très bien et mon slideToggle élément. Je clique ensuite sur un li sur la même page et laisse charger une page.

• Je clique de nouveau sur sidebar_options_arrow et il bascule deux fois, l'un après l'autre. Par exemple. dans cet exemple, il bascule pour montrer l'élément puis le bascule pour le cacher.

• Si je clique ensuite sur un autre li sur la page, puis de nouveau sur sidebar_options_arrow, il bascule 3 fois. C'est un modèle en cours, je l'ai testé à 10 basculé et confirmé en le rendant alerte chaque fois qu'il bascule.

J'apprécierais vraiment toute aide que je peux obtenir à ce sujet, c'est extrêmement ennuyeux!

Merci d'avance.

Answer 1

Il est très probable que votre code ci-dessus s'exécute plusieurs fois, probablement à partir de la charge AJAX, ce qui signifie que le code $('.sidebar_options_arrow').click() reçoit un gestionnaire supplémentaire chaque temps que vous chargez. Pour voir cela en action, il suffit d'ajouter un alert("binding"); au-dessus de votre première ligne: $('.sidebar_options_arrow').click(function() {.

Le contenu chargé AJAX ne doit pas les gestionnaires réexécuter à moins qu'il ne doit, comme vous le voyez dans ce cas, il va provoquer une double indésirables/comportement se chevauchent en raison de chaque charge l'ajout d'un nouveau ensemble des mêmes gestionnaires.

Vous devez déplacer la partie JS du contenu que vous chargez afin de ne pas la relancer ou l'empêcher autrement. Dans le pire des cas (je recommande de ne pas fonctionner du tout, car c'est moins cher, mais si vous avez pour ....) vous pouvez simplement appeler .unbind() avant .click() lors de la fixation du gestionnaire. Remarque: si vous avez plusieurs gestionnaires (scripts utilisateur potentiels, etc ...), vous devrez nommer cette fonction et appeler le .unbind("click", functionName) explicitement pour être sûr.