形式内的两个按钮

Question

似乎有一些奇怪的行为与我的形式内的两个按钮。无论何时单击“添加地址”按钮，事件处理程序都会正确执行，但在完成之后，它也会执行“提交”按钮的事件处理程序。

的按钮的代码如下：

<button class="btn btn-success" id="add-address">Add Address</button> 
<button type="submit" class="btn btn-default">Submit</button> 

我可以通过改变第一按钮进入span元素例如解决这个问题：

<span class="btn btn-success" id="add-address">Add Address</span> 

一切正常，一旦这个变化被制成。有人可以解释这种行为吗？提前致谢。

Answer 1

默认情况下，所有button元素都是submit按钮。您需要将第一个type="button"添加到第一个，以便在点击时停止在父form元素上提交提交事件。

<button type="button" class="btn btn-success" id="add-address">Add Address</button> 
<button type="submit" class="btn btn-default">Submit</button> 

Answer 2

您的代码应如下

<button type="button" class="btn btn-success" id="add-address">Add Address</button> 
<button type="submit" class="btn btn-default">Submit</button> 

始终指定为<button>元素的类型的属性。不同的浏览器可能会为<button>元素使用不同的默认类型。

http://www.w3schools.com/tags/att_button_type.asp