Select Element inside Form not working in JQuery

Question

I have the following HTML form:

<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>

And I want to show an alert box when the username field is clicked. This is my JQuery code:

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

For certain reason the Click is never fired; anything I did wrong?

Answer 1

Your code is correct and the event should be fired. Probably the problem is with AJAX call. Put an alert before the ajax call to make sure that this is indeed the problem.