您正在使用 HTML5 按钮元素。请记住原因是此按钮具有提交的默认行为，如 W3 规范中所述，如下所示： W3C HTML5 Button

所以你需要明确指定它的类型：

<button type="button">Button</button>

为了覆盖默认提交类型。我只想指出发生这种情况的原因。

在按钮上设置类型：

<button type="button" onclick="addItem(); return false;">Add Item</button>
<button type="button" onclick="removeItem(); return false;">Remove Last Item</button>

...这将阻止他们在事件处理程序中发生异常时触发提交操作。然后，修复您的removeItem()函数，使其不会触发异常：

function removeItem() {
  var rows = $('form tr');
  if ( rows.length > 2 ) {
    // change: work on filtered jQuery object
    rows.filter(":last").html('');
    $('form :hidden:last').val('');
  } else {
    alert('Cannot remove any more rows');
  }
}

请注意更改：您的原始代码从 jQuery 集中提取了一个 HTML 元素，然后尝试对其调用 jQuery 方法 - 这引发了异常，导致按钮的默认行为。

FWIW，还有另一种方法可以解决这个问题......使用jQuery连接你的事件处理程序，并在jQuery的事件对象上使用preventDefault()方法来预先取消默认行为：

$(function() // execute once the DOM has loaded
{

  // wire up Add Item button click event
  $("#AddItem").click(function(event)
  {
    event.preventDefault(); // cancel default behavior

    //... rest of add logic
  });

  // wire up Remove Last Item button click event
  $("RemoveLastItem").click(function(event)
  {
    event.preventDefault(); // cancel default behavior

    //... rest of remove last logic
  });

});

...

<button type="button" id="AddItem" name="AddItem">Add Item</button>
<button type="button" id="RemoveLastItem" name="RemoveLastItem">Remove Last Item</button>

这种技术将您的所有逻辑放在一个地方，使其更容易调试......它还允许您通过将type按钮更改回submit并处理事件服务器端来实现回退- 这被称为不显眼JavaScript。

前段时间我需要一些非常相似的东西……我得到了它。

所以我在这里介绍的是我如何使用技巧让表单能够由 JavaScript 提交而无需任何验证，并且仅当用户按下按钮（通常是发送按钮）时才执行验证。

例如，我将使用一个最小的表单，只有两个字段和一个提交按钮。

记住什么是想要的：从 JavaScript 必须能够在没有任何检查的情况下提交。但是，如果用户按下这样的按钮，则必须完成验证，并且只有通过验证才能发送表单。

通常，一切都会从这附近的东西开始（我删除了所有不重要的额外内容）：

<form method="post" id="theFormID" name="theFormID" action="">
   <input type="text" id="Field1" name="Field1" />
   <input type="text" id="Field2" name="Field2" />
   <input type="submit" value="Send" onclick="JavaScript:return Validator();" />
</form>

看看表单标签是如何没有的onsubmit="..."（记住，没有它是一个条件）。

问题是表单总是被提交，无论是onclick返回true还是false.

如果我更改type="submit"为type="button"，它似乎有效但无效。它从不发送表单，但这可以轻松完成。

所以最后我使用了这个：

<form method="post" id="theFormID" name="theFormID" action="">
   <input type="text" id="Field1" name="Field1" />
   <input type="text" id="Field2" name="Field2" />
   <input type="button" value="Send" onclick="JavaScript:return Validator();" />
</form>

在function Validator, where return True;is 上，我还添加了一个 JavaScript 提交语句，类似于以下内容：

function Validator(){
   //  ...bla bla bla... the checks
   if(                              ){
      document.getElementById('theFormID').submit();
      return(true);
   }else{
      return(false);
   }
}

在id=""仅仅是对JavaScriptgetElementById的name=""仅仅是它出现在POST数据。

以这种方式它可以按我的需要工作。

我把它只用于不需要onsubmit表单上的功能的人，但在用户按下按钮时进行一些验证。

为什么我不需要表单标签上的提交？很简单，在其他 JavaScript 部分我需要执行提交，但我不希望有任何验证。

原因：如果用户是执行我想要的提交并需要完成验证的人，但如果是 JavaScript 有时我需要执行提交而这样的验证会避免它。

这听起来可能很奇怪，但在思考例如：在登录时……有一些限制……比如不允许使用 PHP 会话，也不允许使用 cookie！

所以任何链接都必须转换成这样的形式提交，这样登录数据才不会丢失。当尚未完成登录时，它也必须工作。因此不必对链接执行验证。但是，如果用户没有输入用户和通行证这两个字段，我想向用户显示一条消息。所以如果缺少一个，表格一定不能发送！有问题。

看问题：只有当用户按下按钮时，当一个字段为空时，表单不能发送，如果它是 JavaScript 代码，它必须能够发送。

如果我onsubmit对表单标签进行处理，我需要知道它是用户还是其他 JavaScript。由于不能传参数，不能直接传，所以有人加了一个变量来判断是否必须进行验证。验证函数的第一件事是检查变量值等......太复杂了，代码没有说明真正想要什么。

所以解决方案不是在表单标签上有 onsubmit 。Insead 把它放在真正需要的地方，在按钮上。

另一方面，为什么要放置 onsubmit 代码，因为从概念上讲我不想要 onsubmit 验证。我真的想要按钮验证。

不仅代码更清晰，它必须在的地方。请记住这一点： - 我不希望 JavaScript 验证表单（必须始终由 PHP 在服务器端完成） - 我想向用户显示一条消息，告诉所有字段不得为空，需要 JavaScript（客户端边）

那么为什么有些人（思考或告诉我）它必须在 onsumbit 验证中完成？不，从概念上讲，我不会在客户端进行 onsumbit 验证。我只是在按下按钮上做某事，那么为什么不让它实现呢？

好吧，代码和风格完美地解决了这个问题。在我需要发送表单的任何 JavaScript 上：

document.getElementById('theFormID').action='./GoToThisPage.php'; // Where to go
document.getElementById('theFormID').submit(); // Send POST data and go there

当我不需要它时，它会跳过验证。它只是发送表单并加载不同的页面等。

但是，如果用户单击提交按钮（又名type="button"not type="submit"），则在提交表单之前完成验证，如果无效则不发送。

希望这有助于其他人不要尝试冗长而复杂的代码。onsubmit如果不需要就不要使用，并使用onclick. 但是请记住更改type="submit"为type="button"并且请不要忘记submit()通过 JavaScript 执行。

我同意 Shog9，但我可能会使用：

<input type = "button" onClick="addItem(); return false;" value="Add Item" />

根据 w3schools，<button>标签在不同的浏览器上有不同的行为。

您可以简单地使用 jQuery 获取按钮的引用，并防止其传播，如下所示：

 $(document).ready(function () {
    $('#BUTTON_ID').click(function(e) {

            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();

            return false;
    });});