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

正如标题所说，当我点击一个按钮时，我试图重复一行，这样我就可以使用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 -->

$（'#添加'）。单击（函数（）{
变量n=$（'.row'）。长度+1；
var temp=$（'.row:first'）.clone（）；
$（'input:first'，temp.attr（'placeholder'，'Item#'+n）
$（'.row:last'）。在（temp）之后；
})

---

希望有人能帮助我，因为我已经花了好几个小时在这个问题上了一个星期，似乎还没有弄明白。我相信这是一件小事，我只是错过了它。提前感谢：D

您需要使用“添加时单击事件”按钮的事件委派

使用事件委派，您可以通过将事件附加到将为匹配选择器的所有子体激发的父级上，来为动态创建的元素附加事件

阅读：

$（文档）。在（“单击“，”.add“，函数（）上）{
变量n=$（'.row'）。长度+1；
var temp=$（'.row:first'）.clone（）；
$（'input:first'，temp.attr（'placeholder'，'Item#'+n）
$（'.row:last'）。在（temp）之后；
})

您需要对“添加”按钮上的单击事件使用事件委派

使用事件委派，您可以通过将事件附加到将为匹配选择器的所有子体激发的父级上，来为动态创建的元素附加事件

阅读：

$（文档）。在（“单击“，”.add“，函数（）上）{
变量n=$（'.row'）。长度+1；
var temp=$（'.row:first'）.clone（）；
$（'input:first'，temp.attr（'placeholder'，'Item#'+n）
$（'.row:last'）。在（temp）之后；
})

尝试使用firebug并将命令放在控制台中。看看它是如何工作的，它给你带来了什么错误。你能解释一下你遇到的问题是什么吗？试着使用firebug并将命令放在控制台中。看看它是如何工作的，它给你带来了什么错误。你能解释一下你到底遇到了什么问题吗？为什么OP需要事件委派？

不是动态创建的。另外，

$（文档）。在（“单击”上，函数（）{

将在您单击

文档的任何位置时添加一行，而不是在单击
添加
按钮时添加。@sean是的，正确，目的只是告诉OP为什么第二次单击事件不起作用。$（'.row:first'）。clone（）；也将克隆button。我错了吗？您是对的，我没有注意到按钮在克隆行中。但是您仍然需要添加
。添加
，以便只需单击按钮即可完成->
$（文档）。on（“click”，“.add”，function（）{
@Sean是的，谢谢，我在你的评论后查看了答案，发现我错过了我在html中添加的类。请刷新为什么OP需要事件委派？没有动态创建
。另外，
$（文档）。在（“单击”，函数（）{
将在您单击
文档的任何位置时添加一行，而不是在单击
添加
按钮时添加。@sean是的，正确，目的只是告诉OP为什么单击事件第二次不起作用。$（'.row:first'）.clone（）；也将克隆button。我错了吗？您是对的，我没有注意到按钮在克隆行中。但是您仍然需要添加
。添加
，以便只需单击按钮即可完成->
$（文档）。on（“click”，“.add”，function（）{
@Sean是的，谢谢，我在你的评论后查看了答案，发现我错过了我用html添加的课程。请刷新