javascript - 尝试为发票添加新行(div)并在页面重复时获取

Question

正如标题所说，我试图在单击按钮时重复一行，以便我可以使用 PHP Hook 并提取数据并用它做一些事情(创建发票并开具账单)。我的代码部分是:

<!-- Table row -->
<br><br>
<div class="row">
    <!--Product Table-->
    <div class="col-xs-12 table">
        <table class="table table-striped">
            <tbody>
                <tr>
                    <td><form><input type="text" name="product-name[]" placeholder="Product Name"></form></td>
                    <td><form><input type="text" name="description[]" placeholder="Description"></form></td>
                    <td><form><input type="text" name="qty[]" size="1" placeholder="Quantity"></form></td>
                    <td><form><input type="text" name="price-unit[]" size="2" placeholder="Price Per Unit"></form></td>
                    <td><form><input type="text" name="subtotal[]" size="2" placeholder="Sub Total"></form></td>
                </tr>
                <p id='newrow'></p>
            </tbody>
        </table>
        <input type='button' class="btn btn-success" id='add' value='Add item' />
    </div>

    <!--/Product Table-->
    <!-- /.col -->
    <script type="text/javascript">
    $('#add').click(function(){
        var n= $('.row').length+1;
        var temp = $('.row:first').clone();
        $('input:first',temp).attr('placeholder','Item #'+n)
        $('.row:last').after(temp);
    })
    </script>
</div>
<!-- /.row -->

希望有人可以帮助我，因为我已经花了一周的时间来研究它，但似乎无法弄清楚。我确信这是一件小事，而我刚刚错过了它。提前致谢:D

Answer 1

您需要对添加按钮上的点击事件使用事件委托(delegate)。

使用事件委托(delegate)，您可以通过将事件附加到父元素上，为动态创建的元素附加一个事件，该事件将为匹配选择器的所有后代触发

阅读:https://learn.jquery.com/events/event-delegation/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Table row -->
                  
                  <div class="row">
                    <!--Product Table-->
                    <div class="col-xs-12 table">
                      <table class="table table-striped">
                        <tbody>
                          <tr>
                            <td><form><input type="text" name="product-name[]" placeholder="Product Name"></form></td>
                            <td><form><input type="text" name="description[]" placeholder="Description"></form></td>
                            <td><form><input type="text" name="qty[]" size="1" placeholder="Quantity"></form></td>
                            <td><form><input type="text" name="price-unit[]" size="2" placeholder="Price Per Unit"></form></td>
                            <td><form><input type="text" name="subtotal[]" size="2" placeholder="Sub Total"></form></td>
                          </tr>
                          <p id='newrow'></p>
                        </tbody>
                      </table>
                        </div>
 <input type='button' class = "add" class="btn btn-success" id='add' value='Add item' />
                     
                    </div>

                    <!--/Product Table-->
                    <!-- /.col -->
<script type="text/javascript">
$(document).on("click",".add",function(){
var n= $('.row').length+1;
var temp = $('.row:first').clone();
$('input:first',temp).attr('placeholder','Item #'+n)
$('.row:last').after(temp);
})
</script>



                
                  <!-- /.row -->