javascript - 偶発的な JavaScript リダイレクト?

Question

Enter キーを押すか送信ボタンを押すと、リストにアイテムを追加するフォームがあります。何を変更したかはわかりませんが、突然 Enter キーを押すと URL がリダイレクトされるように見えますが、ボタンをクリックすると正常に動作します。

HTML 部分は次のようになります。

<form id="add-ingr">
    <input class="new-ingredient" type="text" size="50" name="new-ingredient" placeholder=" Your ingredient"></input>
    <img id="check" src="imgs/check.png" alt=""/>
</form>

jQuery は次のとおりです。

$('#check').click(function () {
    addIngredient('new-ingredient');
});
$('.new-ingredient').keypress(function (e) {
    if (e.keyCode == 13) {
        addIngredient('new-ingredient');
    }
});

したがって、どちらの方法でも同じ機能を実行しています。どちらの場合も、成分をリストに正常に追加しますが、2 番目のケースでは、ページが「recipe.html」から「recipe.html?new-ingredient="」にリダイレクトされます。そして、これが本当に私を混乱させる部分です:フォームに余分な入力を追加すると、どちらのボックスでもEnterキーを押してもこの問題は発生しません:

<form id="add-ingr">
    <input class="new-ingredient" type="text" size="50" name="new-ingredient" placeholder=" Your ingredient"></input>
    <img id="check" src="imgs/check.png" alt=""/>
    <input type="text"></input>
</form>

また、実際のボタン (クリック可能な画像ではない) を追加すると、ボタンが押された場合に何もするコードがなくても、Enter キーを押すようにリダイレクトされます。この場合、追加の入力フィールドは効果がありません。

<form id="add-ingr">
    <input class="new-ingredient" type="text" size="50" name="new-ingredient" placeholder=" Your ingredient"></input>
    <img id="check" src="imgs/check.png" alt=""/>
    <button id="button">Add Ingredient</button>
</form>

なぜこれが起こっているのか、私にはまったくわかりません。Enterキーを押したときにアクションを実行するためにjQueryを削除しても、これは引き続き発生します。私は JavaScript を初めて使用するので、これが明らかな場合は申し訳ありませんが、助けていただければ幸いです。

関連する場合は、コードをさらに提供することもできますが、大量のコードで物事を詰まらせたくありませんでした。