Comment faire pour supprimer l'événement mouseover/mouseout

Question

J'ai un site avec trois onglets que j'essaie d'ajouter dynamiquement l'événement mouseover/mouseout en fonction de quel onglet est cliqué, le problème est qu'il semble que les événements mouseover/out sont ' lié à l'onglet après leur appel. Existe-t-il un moyen de «dissocier» l'événement des onglets?

Voici ce que mes js ressemble

onTab1Clicked() 
{ 
    $('#tab2').mouseover(function() { 
     $('#tab2').addClass('outlineBorder'); 
     }); 
    $('#tab2').mouseout(function() { 
     $('#tab2').removeClass('outlineBorder'); 
     }); 
    $('#tab3').mouseover(function() { 
     $('#tab3').addClass('outlineBorder'); 
     }); 
    $('#tab3').mouseout(function() { 
     $('#tab3').removeClass('outlineBorder'); 
     }); 
} 

onTab2Clicked() 
{ 
    $('#tab1').mouseover(function() { 
     $('#tab1').addClass('outlineBorder'); 
     }); 
    $('#tab1').mouseout(function() { 
     $('#tab1').removeClass('outlineBorder'); 
     }); 
    $('#tab3').mouseover(function() { 
     $('#tab3').addClass('outlineBorder'); 
     }); 
    $('#tab3').mouseout(function() { 
     $('#tab3').removeClass('outlineBorder'); 
     }); 
} 

onTab3Clicked() 
{ 
    $('#tab2').mouseover(function() { 
     $('#tab2').addClass('outlineBorder'); 
     }); 
    $('#tab2').mouseout(function() { 
     $('#tab2').removeClass('outlineBorder'); 
     }); 
    $('#tab1').mouseover(function() { 
     $('#tab1').addClass('outlineBorder'); 
     }); 
    $('#tab1').mouseout(function() { 
     $('#tab1').removeClass('outlineBorder'); 
     }); 
} 

Cela fonctionne bien sur la charge de la page, mais si je clique loin de tab1 (page d'état de charge) à un autre onglet puis de nouveau à Tab1 les événements mouseover/out encore le feu.

Merci.

Answer 1

Vous pouvez simplifier votre approche globale en faisant quelques changements très simples ici. D'abord, donnez à ces éléments #tab1, #tab2 et #tab3 une classe, par ex. class="tab" alors vous pouvez faire ceci:

$(".tab").click(function() { 
    $(this).addClass('active'); //make this tab active 
    $(".tab").not(this).removeClass('active'); //make other tabs inactive 
}); 

Maintenant, lorsque vous cliquez sur un onglet, il obtient la classe « active », et les autres ne l'auront pas. Ensuite, vous pouvez utiliser .live() avec le :not() selector pour obtenir l'effet de vol stationnaire vous voulez, comme ceci:

$('.tab:not(.active)').live('mouseover mouseout', function() { 
    $(this).toggleClass('outlineBorder'); 
}); 

Ce sélecteur ne sera pas agir sur un onglet alors qu'il est .active, donc l'effet hover ne fonctionne que sur l'onglet n'est pas sélectionné, comme vous l'aviez à l'origine, mais beaucoup plus facile à maintenir.

Answer 2

Oui, vous l'avez presque eu!

$('#tab3').unbind('mouseout'); 

Answer 3

$('#tab1,#tab2,#tab3').click(function(){ 
    $(this).unbind('mouseout mouseover'); 
    // this will unbind mouseout and mouseover events when click 
    // e.g. onTab1Clicked, mouseout and mouseover events will be unbind on tab1 
})