Выберите элемент внутри формы не работает в JQuery

Question

У меня есть следующая HTML-форма:

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

И я хочу показать поле alert при нажатии поля username. Это мой код JQuery:

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

По определенной причине Click никогда не срабатывает; что я не так сделал?

Answer 1

Ваш код правильный, и событие должно быть запущено. Вероятно, проблема в вызове AJAX. Поставьте предупреждение перед вызовом ajax, чтобы убедиться, что это действительно проблема.

Answer 2

Вместо этого может потребоваться событие focus, поскольку click будет срабатывать только в том случае, если вы явно щелкнете по элементу:

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

Кроме этого, вы можете заглянуть в Firebug , чтобы убедиться, что запрос успешно завершен. Или, что еще лучше, вы можете использовать низкоуровневый вызов $.ajax, чтобы узнать, не выполняется ли запрос:

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