Javascript - 私が入力フォームに入力したときにコードが実行されています

Question

私はコードを書いていました。私はその後、コードを削除し、私が入力をヒットすると、それはまだ機能を起動します。それは私を本当に混乱させました。私は自分のコードの90％のようにコメントしましたが、それでもその機能を発揮します。明らかに私はそれを発射しない関数を削除した場合、関数を追加し、kaboom、それは再び発砲した。わからないなぜか、どのようにこれは私のコードへのリンクです

ことを防ぐために：
https://codepen.io/zepold/pen/yapLkE

またここにコードを置く：

HTML

<div class="container"> 
    <div id="home"> 
    <h1 id="title">Wikipedia Search</h1> <br> 
    <form> 
     <div class="form-group center-block search"> 
     <!-- <input type="search" id="searchbar" class="form-control"/> --> 

     <input type="search" id="searchbar" class="form-control homebar"/> 
     <input type="search" id="searchbar" class="form-control resultsbar hidden"/> 

     </div> 
     <div class="form-group text-center"> 
     <button class="home-search">Search</button> 
     <button class="results-search hidden">Search</button> 
     <button id="luckybtn">I'm feeling lucky</button> 
     </div> 
    </form> 
    </div> 

    <div id="results" class=""> 

    </div> 
</div> 

CSS

body { 
    margin-top: 5vh; 
    background-color: #e2e1e0; 
    overflow-y: scroll; 
} 

h1 { 
    margin: 0px; 
} 

#home { 
    width: 100%; 
    height: 90vh; 
    min-height: 300px; 
    background-color: white; 
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); 
} 

#title { 
    text-align: center; 
    font-size: 40px; 
    padding-top: 25vh; 
    padding-left: 25px; 
    padding-right: 25px; 
} 

.search { 
    width: 500px; 
} 

.cards { 
    width: 100%; 
    background-color: white; 
    margin-top: 20px; 
    margin-bottom: 20px; 
    height: 150px; 
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); 
} 

.cards > h2 { 
    padding: 10px 0px 10px 10px; 
    margin: 0px; 
} 

.cards > p { 
    padding: 0px 0px 10px 10px; 
    margin: 0px; 
} 

hr { 
    margin: 0px; 
} 

@media screen and (max-width: 767px) { 
    body { 
    margin-top: 2vh; 
    background-color: cyan; 
    } 

    #home { 
    height: 96vh; 
    } 

    .search { 
    width: 70%; 
    } 
} 

@media screen and (min-width: 768px) and (max-width: 992px) { 
    body { 
    background-color: red; 
    } 

    .search { 
    width: 60%; 
    } 
} 

@media screen and (min-width: 993px) and (max-width: 1200px) { 
    body { 
    background-color: green; 
    } 
} 

@media screen and (min-width: 1201px) { 
    body { 
    background-color: orange; 
    } 
} 

JAVASCRIPT

$(function() { 
    $(".searchbar").focus(); 
    var searchTerm = ""; 
    var template = "<div class='cards'><h2><h2/><p><p/></div>" 
    var resultsArray; 

    /* Code that is supposed to fire function after hitting enter 
    $(".homebar").keypress(function(e) { 
    if (e === 13) { 
     $(".home-search").click; 
    } 
    }); 

    $(".resultsbar").keypress(function(e) { 
    if (e === 13) { 
     $(".results-search").click; 
    } 
    }); 
    */ 

    $(".home-search").click(function(event) { 
    event.preventDefault(); 
    searchTerm = $("#searchbar").val(); 

    for (var x = 1; x <= 10; x++) { 
     $("#results").append("<div class='cards'></div>"); 
    }  

    postData(searchTerm); 
    $("#home").animate({height: "200px"}); 
    $("#title").animate({"padding-top": "10vh"}) 
    $(this).addClass("hidden"); 
    $(".homebar").addClass("hidden"); 
    $(".results-search").removeClass("hidden"); 
    $(".resultsbar").removeClass("hidden"); 
    console.log("home click success"); 

    }) 

    $(".results-search").click(function(event) { 
    event.preventDefault(); 
    searchTerm = $("#searchbar").val(); 
    postData(searchTerm); 
    console.log("results click success"); 
    }) 

    function postData(term) { 
    $.ajax({ 
     type: 'GET', 
     url: '//en.wikipedia.org/w/api.php', 
     dataType: 'jsonp', 
     data: { 
     action: 'query', 
     list: 'search', 
     srsearch: term, 
     //srlimit: '15', 
     format: 'json' 
     }, 
     success: function(result) { 
     console.log(result.query.search); 
     $("#results").children().each(function(index) { 
      $(this).html(searchTerm); 
     }) 
     }, 
     error: function() { 
     console.log("error"); 
     } 
    }) 
    } 
}) 

Answer 1

$(".home-search").click(function(event) {} 

のjavascriptのこの作品は、Enterキーを押すと、これはブラウザが入る押す提出押すのと同じであると考えているという事実によって引き起こされる実行するものです。ちょうどあなたのフォーム要素を削除し、prevent submit on hitting enter

Answer 2

そのため、あなたのフォーム要素の：

がこの質問を見て防止します。

それとも

<form id="search-form"> 
... 
</form 

    $('#search-form').on('keyup keypress', function(e) { 
    var keyCode = e.keyCode || e.which; 
    if (keyCode === 13) { 
    e.preventDefault(); 
    return false; 
    } 
}); 

plunkerを次のようにイベントを入力してください無効にしてみてください：https://codepen.io/anon/pen/rrQOEP