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按钮将作为提交按钮并在点击时刷新您的页面，如果您按表单放弃它，以避免您必须指定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>...');

希望这有帮助。

表单标记与Jquery函数冲突

1 个答案: