javascript - getJSON 在单击按钮时不起作用，但在按 Enter 键时起作用

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();
    }
    });
    }
    });
    }  

预期的结果是通过不同的点击事件和搜索来拉取和显示数据到 map 上。单击某个州可以，输入邮政编码并按 Enter 键可以，但输入邮政编码并单击搜索则不起作用。

如果大家有任何建议，我们将不胜感激。我的职业生涯还很年轻，主要从事 .NET、C# 和 Xamarin 工作。不幸的是 JS 和 JQuery 对我来说有点陌生。谢谢!

Answer 1

我的表单并没有阻止通过提交按钮在表单上进行默认设置。它只是阻止输入时的默认设置。一旦我添加type="button"在我的里面<button>标记一切工作正常。