如何防止按钮提交？

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

}

谢谢，

Answer 1

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

type="button"

E.g：

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

默认情况下，提交表单的type of button elements is "submit"。但如果type为"button"，则只是一个按钮，而不是表单提交按钮。

Answer 2

根据这一点，您已经绑定了点击以及您想要实现的目标，您可以返回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();          
 });