Sélectionnez l'élément à l'intérieur ne fonctionne pas dans le formulaire JQuery

Question

je le formulaire HTML suivant:

<div id="main"> 
    <form Id="search-form" action="/ViewRecord/AllRecord" method="post"> 
    <div> 
     <fieldset> 
      <legend>Search</legend> 
      <p> 
       <label for="username">Staff name</label> 
       <input id="username" name="username" type="text" value="" /> 
       <label for="softype"> software type</label> 

       <input type="submit" value="Search" /> 
      </p> 
     </fieldset> 
    </div> 
    </form> 
</div> 

Et je veux montrer une boîte alert lorsque le champ username est cliqué. Ceci est mon code JQuery:

$(function() { 
$("#username").click(function() { 
     $.getJSON("ViewRecord/GetSoftwareChoice", {}, 
    function(data) { 
     alert(data); 
    }); 
    }); 
}); 

Pour certaine raison du Click est jamais tiré; tout ce que j'ai fait de mal?

Answer 1

Votre code est correct et l'événement doit être tiré. Probablement le problème est avec l'appel AJAX. Mettez une alerte avant l'appel ajax pour vous assurer que c'est effectivement le problème.

Answer 2

Vous voudrez peut-être l'événement focus à la place, comme click ne fera que le feu si vous cliquez explicitement sur l'élément:

$(function() { 
    $("#username").focus(function() { 
     $.getJSON("ViewRecord/GetSoftwareChoice", {}, function(data) { 
      alert(data); 
     }); 
    }); 
}); 

Autre que cela, vous voudrez peut-être regarder dans Firebug pour vous assurer que la demande termine avec succès. Ou, mieux encore, vous pouvez utiliser le bas niveau $.ajax appel pour voir si la demande ne termine pas:

$(function() { 
    $("#username").focus(function() { 
     $.ajax({ 
      url: 'ViewRecord/GetSoftwareChoice', 
      dataType: 'json', 
      type: 'GET', 
      success: function(data) { alert(data); }, 
      error: function() { alert('something went wrong!'); } 
     }); 
    }); 
});