Question

$(document).ready(function() {
  $(".plus").click(function(e) {
    e.preventDefault();

    //add input box
    $(".list").append('<div class="item"><select name=selection[]>...select options here...</select><a href="#" class="Remove">remove</a></div>');
  });

  //user click on remove text
  $(".list").on("click", ".remove", function(e) { 
    e.preventDefault();
    $(this).parent('div').remove();
  });
});

HTML：

<form method="post" action="search.php">
  <div>
    <button class="plus">+</button>
  </div>

  <div class="list"></div>

  <div>
    <input type="text" name="txt">
  </div>

  <div>
    <input type="submit" name="submit" value="Submit">
  </div>
</form>

此代码用于以动态形式添加（单击.plus按钮）/删除（单击.remove链接）选择框行，并且完美无瑕地工作。该表单还包含一个搜索输入字段（name =“txt”），它不是.list类的一部分。如果我在此输入字段中键入内容并按Enter键（应提交表单），显然这将作为.plus按钮的单击事件处理，并添加新行而不是提交表单。如果我通过鼠标单击提交表单一切正常。有什么想法吗？

Answer 1

您的表单将.plus按钮视为提交按钮，因为它没有类型（表单的默认操作）。但是，您已拨打event.preventDefault()，因此未提交表单，而是添加了您的行。

有几种方法可以防止这种情况发生;一种方法是简单地将type="button"添加到您的第一个按钮，以区别于submit类型。

<button class="plus" type="button">+</button>

通过按Enter键阻止触发jQuery .click事件

1 个答案: