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

所以它以任何一种方式运行相同的功能。在这两种情况下，它都成功地将成分添加到列表中，但在第二种情况下，页面从“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>

另外，如果我添加一个实际按钮（不是我的可点击图像），它会像按回车一样重定向，即使按下按钮我没有任何代码可以执行任何操作。在这种情况下，额外输入字段无效。

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

我完全不知道为什么会这样。即使我在输入时摆脱了jQuery来执行操作，这仍然会发生。我是JavaScript的新手，很抱歉，如果这是显而易见的事情，但我真的很感激一些帮助。

如果相关的话，我也可以提供更多我的代码，但我不想用大量代码堵塞。

Answer 1

点击输入（或点击按钮，如果它在那里）是提交表单（这使它看起来“重定向URL”）。您需要阻止e.preventDefault()发生这种情况。所以在点击监听器中：

$('#button').click(function(e){
  e.preventDefault();
  addIngredient('new-ingredient');
});

将它放在每个侦听器中，或者删除表单标签，这样就没有任何内容可以提交（如评论中所述）。

Answer 2

我并不完全责怪你的困惑。浏览器的默认行为是执行“提交”操作，无论它是什么，当有人在表单中的字段突出显示时按Enter键时。正如elclanrs所说，你可以覆盖提交动作;事实上，我很确定JQuery就是这样：

$('#add-ingr').submit(function(e) {
  if ('event is not coming from button')...{
    e.preventDefault();
  }
});

我担心无法解释为什么添加空白输入会改变效果。通过我的懒惰，我也给你留下了确定允许实际提交的最佳方式的工作（如果表单被提交到服务器，你不会每次都阻止提交）

意外的JavaScript重定向？

2 个答案: