Question

正如标题所示，当我点击一个按钮时，我试图重复一行，这样我就可以使用PHP挂钩并拉取数据并对其进行处理（创建发票并开账单）。我的代码部分是：

<!-- 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

您需要在添加按钮上为点击事件使用事件委派。

使用事件委派，您可以通过将事件附加到将为所有与选择器匹配的后代触发的父项上附加动态创建元素的事件

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

＆＃13;

<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 -->

＆＃13;

尝试为发票添加新行（div）并在页面重复时获取

1 个答案: