与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>...'); 

希望这有助于。