javascript - 如何防止按钮提交？

Question

我是 jquery/javascript 的新手，所以也许我在这里走错了路。

我的表单中有一个按钮，它的工作只是进行一些 DOM 操作。当然不提交表格。

<button id="add_deals_button" class="btn btn-success"></button>

在我的 js 文件中，我编写了以下内容：

$(document).ready(function () {  
  $("#add_deals_button").click(add_deals)
});

当我单击按钮时，它会进行 DOM 操作，但也会发送 POST，从而提交表单。如何防止按钮提交任何内容？

更新：

function add_deals(e){
    $('#hidden_deals').clone().attr({'class':'none'}).appendTo('#deal_status tbody')

}

谢谢，

score 5 · Accepted Answer

最简单的方法是将其添加到button标签中：

type="button"

例如：

<button id="add_deals_button" type="button" class="btn btn-success"></button>

默认情况下，type元素button的是"submit"，它提交表单。但如果typeis "button"，它只是一个按钮，而不是表单提交按钮。

score 1 · Accepted Answer

根据您已绑定到单击以及您想要实现的目标，您可能会返回 false；

 $("#add_deals_button").click(function(e) {
      // do your actions
      add_deals();
      return false;
 });

这将在 jQuery 中与

 $("#add_deals_button").click(function(e) {
      // do your actions
      e.preventDefault();
     e.stopPropagation();          
 });

2 回答 2