Jquery sur hover changement de texte html

Question

J'ai un bouton comme ci-dessous. J'ai une liste de boutons. Lorsque l'utilisateur clique dessus, j'exécute une fonction javascript et il effectue une requête ajax, si la réponse à la requête est réussie, alors je change l'attribut status de la balise button. Je le change de 1 à 2.

Lorsque l'attribut status = 1, je souhaite que l'utilisateur puisse voir du texte en survolant le bouton.

Lorsque l'attribut status = 2, je ne veux pas qu'il voit quoi que ce soit sur le bouton de vol stationnaire.

J'ai essayé comme ci-dessous, mais après le statut = 2, le texte du bouton fixe change en survol. Comment puis-je résoudre ce problème?

<button onclick="dosomething()" id="someid" status="1">name</button> 

<script> 
function dosomething(){ 
    $.ajax({ 
     type:"GET", 
     url:"somefile.php", 
     success : function(data) { 
      if (data == '200') { 
       $('#someid').attr('status', '2'); 
      } 
     }, 
     error : function() { 
      alert('error'); 
     }, 
    }) 
} 

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

$(document).change(function() { 
    updateHoverStates() 
}); 

function updateHoverStates() { 
    $('button[status=1]').hover(
     function() { 
      $(this).text('You are hovering'); 
     }, 
     function() { 
      $(this).text('You are not hovering'); 
     } 
    ); 
} 
</script> 

Answer 1

Cela peut fonctionner, de cette façon l'événement vérifie le staus attr chaque fois qu'il est appelé, au lieu d'une seule fois au moment de la liaison.

function updateHoverStates() { 
    $('button[status]').hover(
     function() { 
      if($(this).attr('status') == '1') 
       $(this).text('You are hovering'); 
     }, 
     function() { 
      if($(this).attr('status') == '1') 
       $(this).text('You are not hovering'); 
     } 
    ); 
} 

Comme une note de côté, je crois data-status serait une façon meilleure prise en charge d'avoir des attributs personnalisés, ce serait aussi permettre l'utilisation de .data('status') au lieu de .attr('status').

Sinon, vous pourriez être en mesure d'utiliser les CSS pour simuler que

button[status="1"]:hover { 
    //possible attributes here 
} 

Answer 2

change événements ne pas bouillonner le document, donc updateHoverStates est probablement pas appelé une seconde fois.

Answer 3

Vous avez défini une fois la fonction de survol pour tous les boutons correspondant au sélecteur button[status=1]. Vous avez modifié l'attribut status plus tard, mais cela ne détache pas les écouteurs d'événement de survol de ces boutons.

Dans la fonction où vous définissez

$('#someid').attr('status', '2'); 

il vous suffit de retirer l'écouteur d'événement manuellement.

$('#someid').unbind('hover'); 

Answer 4

jsFiddle: http://jsfiddle.net/ajzsv/20/

<button onclick="dosomething()" id="someid" status="1">name</button> 

<script> 
function dosomething() 
{ 
    $('#someid').attr('status', '2'); 
    $('#someid').unbind('hover'); 
} 

$(document).ready(function() 
{ 
    $('button').each(function() 
    { 
     $(this).hover(
     function() 
     { 
      $(this).text('You are hovering'); 
     }, 
     function() 
     { 
      $(this).text('You are not hovering'); 
     }); 
    }); 
}); 
</script>​