2010-11-24 18 views
4

Quelqu'un peut-il aider?JQuery: Modifier l'événement de la zone de texte Le contrôle html annule l'événement Click du bouton html (événements en direct)

J'ai un événement de changement sur une zone de texte et un événement de clic sur un bouton - tout html.

Maintenant, si je clique sur le bouton, l'événement se produit un clic - génial!

Mais je change quelque chose dans la zone de texte et puis cliquez sur le bouton, l'événement de l'événement de changement se passe qui est génial mais je ne reçois jamais l'événement de clic dans le bouton.

Ceci est ma jquery, y at-il un moyen de contourner cela .. je suis perdu.

$('#myTextbox').live('change', function() { 
     $.ajax({ 
      type: "POST", 
      url: "test.aspx/GetDate", 
      data: "{}", 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      success: function(msg) { 
       alert('the date is ' + msg.d); 
      } 
     }); 


    }); 

    $('#myButton').live('click', function() { 
     alert('i am in click'); 

    }); 

EDIT

J'ai créé un formulaire HTML très simple et bien sûr l'événement click ne se déclenche pas si le changement des feux premier - en fait dans cet exemple, je l'ai utilisé événement flou ... mais il est le même

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 

    <script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
    $(function() { 
     $('#htmlbutton').bind('click', function() { 

      alert('i am in click'); 

     }); 



     $('#htmltextbox').bind('blur', function() { 

      alert('in blur'); 

     }); 
    }); 
</script> 

</head> 
<body> 
    <form id="form1"> 
    <div> 
     <input id="htmlbutton" type="button" value="button" /><input id="htmltextbox" type="text" /></div> 
    </form> 
</body> 
</html> 
+0

Pourriez-vous créer un exemple de page sur jsFiddle par exemple? Cela pourrait être quelque chose de vraiment. Êtes-vous sûr que le formulaire n'est pas soumis? Peut-être que vous devriez annuler l'événement click en retournant false à la fin .. – Harmen

+0

bien oui je suis à peu près sûr qu'il ne soumet pas ... j'ai alerte ('je suis en clic'); là-dedans ... et comme je dis si je ne mets rien dans la zone de texte alors l'événement de changement ne se produit pas MAIS alors je reçois l'événement de clic sur le bouton – Martin

+0

Je viens de confirmer votre problème. Je voudrais que ce soit un peu plus clair, que vous allez directement de taper en cliquant sur le bouton. C'est quand l'événement de clic ne se produit pas. – shoebox639

Répondre

3

Il semble que votre alerte écrase l'événement de clic de bouton. Si au lieu d'alerter, vous changez la couleur des deux éléments, vous verrez que les deux événements se déclenchent. Ce qui se passe, c'est que l'événement flou/changement est déclenché dès que le bouton de la souris descend sur le bouton. Comme il y a une alerte, vous devez cliquer dessus et ne jamais enregistrer le bouton sur le bouton, ce qui est nécessaire pour déclencher un événement click.

L'ajax devrait avoir fini et passé à l'événement suivant. À moins que l'appel ne revienne si vite qu'il a écrasé le clic même quand même.

+0

Wow thanks! Ça marche! C'était l'alerte !!! Est-ce normal? – Martin

+0

Comme je l'ai expliqué, pour qu'un clic ne se déclenche même pas, votre souris doit redescendre puis revenir en arrière. Vous pouvez confirmer que si vous maintenez simplement votre souris sur le bouton et que vous le faites glisser, l'événement click ne se déclenche pas. Eh bien, la même chose est arrivée ici. Il a enregistré la souris, mais l'alerte est apparue. Je présume que vous avez ensuite déplacé la souris, cliquez sur OK. La boîte de dialogue d'alerte est synchrone, de sorte que toute l'exécution de JavaScript s'arrête. Ensuite, la souris n'est jamais enregistrée. – shoebox639

+0

explication cool! Merci – Martin