0

我有一个表单，当我按下回车键或点击提交按钮时，它会将项目添加到列表中。我不确定我改变了什么，但突然按下回车键似乎重定向了 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>

此外，如果我添加一个实际按钮（不是我的可点击图像），它会像按 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 新手，如果这很明显，我很抱歉，但我真的很感激一些帮助。

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

4

2 回答 2

0

点击回车（或点击按钮，如果有的话）正在提交表单（这使它看起来像是“重定向 URL”）。你需要防止这种情况发生在e.preventDefault(). 所以在点击监听器中：

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

把它放在每个监听器中，或者去掉你的表单标签，这样就没有任何东西可以提交（正如评论中提到的那样）。

于 2013-09-05T20:16:35.953 回答
0

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

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

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

于 2013-09-05T20:23:04.733 回答