形式內的兩個按鈕

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