與Jquery函數衝突的表單標籤

Question

我是一個新手，經過一番研究，我只是感覺到這個問題已經超出了我的頭腦，所以我只是想要離開。

下面的Jfiddle顯示代碼工作正常 - https://jsfiddle.net/s1tp8t59/2/ - 它的jQuery，也就是說。但是，當我用表單標籤包圍html時，它似乎完全搞亂了jquery。

我會在下面的代碼中指出我要添加表單標籤的位置。

HTML

<div id = "container"> 


<form action = "<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method = "post"> 

<div id = "invoice_header"> 

<div style="float:left;margin-right:20px;"> 
<label for="name" class = "ih1">To</label> 
<input id="to" type="text" value="" name="to"> 
</div> 

<div style="float:left;margin-right:20px; "> 
<label for="date" class = "ih1">Date</label> 
<input id="date" type="datetime-local" value="" name="date"> 
</div> 

<div style="float:left;margin-right:20px;"> 
<label for="duedate" class = "ih1">Due Date</label> 
<input id="duedate" type="datetime-local" value="" name="duedate"> 
</div> 

<div style="float:left; margin-right:20px;"> 
<label for="invoice" class = "ih1">Invoice</label> 
<input id="invoice" type="text" value="" name="invoice"> 
</div> 

<div style="float:left;margin-right:20px;"> 
<label for="reference" class = "ih1">Reference</label> 
<input id="reference" type="text" value="" name="reference"> 
</div> 

</div> 



    <table> 
    <thead> 
    <tr> 
    <td> 
    <label for="item" class = "ih2">Item</label> 
    </td> 
    <td> 
    <label for="item" style = "visibility: hidden; font-family: Sans Serif; font-size: 13px; font-weight: bold; font-style: normal;">Add</label> 
    </td> 
    <td> 
    <label for="item" class = "ih2">Description</label> 
    </td> 
    <td> 
    <label for="item" class = "ih2">Qty</label> 
    </td> 
    <td> 
    <label for="item" class = "ih2">Unit Price</label> 
    </td> 
    <td> 
    <label for="item" class = "ih2">Disc %</label> 
    </td> 
    <td> 
    <label for="item" class = "ih2">Account</label> 
    </td> 
    <td> 
    <label for="item" style = "visibility: hidden; font-family: Sans Serif; font-size: 13px; font-weight: bold; font-style: normal;">Add</label> 
    </td> 
    <td> 
    <label for="item" class = "ih2">Tax Rate</label> 
    </td> 
    <td> 
    <label for="item" style = "visibility: hidden; font-family: Sans Serif; font-size: 13px; font-weight: bold; font-style: normal;">Add</label> 
    </td> 
    <td> 
    <label for="item" class = "ih2">Amount</label> 
    </td> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
    <td> 
    <input type="text" name = "sales[1][item]" size = "12"> 
    </td> 
    <td> 
    <button class="item">Add</button> 
    <div class = "dropmenu"></div> 
    </td> 
    <td> 
    <input type="text" name="sales[1][description]" size="40"> 
    </td> 
    <td> 
    <input type="text" name="sales[1][qty]" size="4"> 
    </td> 
    <td> 
    <input type="text" name="sales[1][price]" size="6"> 
    </td> 
    <td> 
    <input type="text" name="sales[1][disc]" size="4"> 
    </td> 
    <td> 
    <input type="text" name="sales[1][account]" size="24"> 
    </td> 
    <td> 
    <span class="valueHolder">Add</span> 
    </td> 
    <td> 
    <input type="text" name= "sales[1][taxrate]"size="16"> 
    </td> 
    <td> 
    <span class="valueHolder">Add</span> 
    </td> 
    <td> 
    <input type="text" name="sales[1][amount]" size="12"> 
    </td> 
    <td><a href="#" class="remove_field">Remove</a></td> 
</tr> 
</tbody> 
</table> 

<div id = "submitposition"> 
<input type = "submit" submit = "addsales" class = "submit"> 
</div> 

</form> 




<div id = "morebutton"> 
<button class="add_field_button">Add add a new line</button> 
</div> 

</div> 

Answer 1

Updated fiddle。

這種情況發生，因爲你add按鈕，將作爲提交按鈕，並刷新上點擊你的頁面，如果你通過形式surrended它，以避免您必須指定type='button'，所以在你的HTML代碼中的按鈕應該是這樣的行動：

<td> 
    <button class="item" type="button">Add</button> 
    <div class = "dropmenu"></div> 
</td> 

而且在喜歡你的JS代碼：

$('table tbody').append('<tr><td>....<button class="item" type="button">Add</button>...'); 

希望這有助於。