Question

如果用户在填写字段后按回车，则我的getJSON请求和我函数的其余部分都可以正常工作，但是如果他们单击搜索按钮，我的函数就不会超过getJSON请求。

我在SO上找到了类似的帖子，但是还不能解决我的问题。我曾尝试在.click事件之前添加.live，还尝试在几个不同的位置添加e.preventDefault，但这也没有解决。

我的HTML看起来像这样

<input id="zipCode" maxlength="5" type="text"> <button id="zipSearch" onclick="findByZip()">Search</button></p>

我的JS看起来像这样

$(document).ready(function () {
    $('#zipSearch').click(findByZip);

    $('#zipCode').bind('keydown', function (e) {

        if (e.keyCode === 13) { // 13 is enter key
            e.preventDefault();
            findByZip();
            return false;
        }
    });
}
);

function findByZip() {
    console.log('running findByZip');
    var zip = $('#zipCode').val();
    var stateName = $('#stateName');
    stateName.text("Reps for " + zip);
    $("#results").empty();
    var url='//something.com/api/Reps?Zipcode=' + zip;
    console.log(url);
    $.getJSON(url, function (data) {
    console.log(data);
    if (data.length == 0) {
    var header = "<h3>No matches found.</h3>"
    $('#result').append(header);
    }
    else {
    $.each(data, function (i, item) {
    var header = "<h3>Manufacturer's Representative</h3>";
    var businessName = $("<h4 id=businessName" + i + "></h4>").text(item.BusinessName);
    var contactName = $("<h4 id=contactName" + i + "></h4>").text(item.Contact);
    var address = $("<div id=address" + i + "></div>").text(item.Address);
    var address2 = $("<div id=address2" + i + "></div>").text(item.City + ", " + item.State + " " + item.Zipcode);
    var phone1 = $("<div id=phone1" + i + "></div>").text("PH: " + item.Phone1);
    var phone2 = $("<div id=phone2" + i + "></div>").text("PH2: " + item.Phone2);
    var fax = $("<div id=fax" + i + "></div>").text("FAX: " + item.Fax);
    var email = '<div id=email' + i + '><a href="' + item.Email + '">' + item.Email + '</a></div>';
    var website = '<div id=website' + i + '><a href="' + item.Website + '">' + item.Website + '</a></div>';
    if (item.RegionalRepId == item.Id) {
    header = "<h3>Regional Manager</h3>";
    }
    $("#results").append(header, businessName, contactName, address, address2, phone1, phone2, fax, email, website);
    if (businessName[0].textContent == "null") {
    $("#businessName" + i).remove();
    }
    if (contactName[0].textContent == "null") {
    $("#contactName" + i).remove();
    }
    if (address[0].textContent == "null") {
    $("#address" + i).remove();
    $("#address" + i).remove();
    }
    if (phone1[0].textContent == "PH:null") {
    $("#phone1" + i).remove();
    }
    if (phone2[0].textContent == "PH2:null") {
    $("#phone2" + i).remove();
    }
    if (fax[0].textContent == "FAX:null") {
    $("#fax" + i).remove();
    }
    if (email.includes("null")) {
    $("#email" + i).remove();
    }
    if (website.includes("null")) {
    $("#website" + i).remove();
    }
    });
    }
    });
    }

预期结果是仅通过不同的单击事件提取并显示数据，然后搜索到地图。单击状态有效，输入邮政编码，然后按Enter键有效，但是键入邮政编码并单击搜索无效。

如果您有任何建议，将不胜感激。在我的职业生涯中很年轻，主要工作于.NET，C＃和Xamarin。不幸的是，JS和JQuery对我来说有点新。谢谢！

Answer 1

我的表单没有通过提交按钮阻止表单的默认设置。这只是防止输入默认值。将type="button"添加到<button>标记中后，一切正常。

getJSON在单击按钮时不起作用，但与按Enter键有关

1 个答案: