Javascript 允许用户添加表单输入字段：为什么append（）只工作一次？

我正在尝试创建一个在表中包含“添加新产品”部分的订单。基本上，用户应该能够单击“添加行”链接，并出现一个新的输入行，允许用户将另一个产品添加到订单列表中。我可以有这项工作一次，但在此之后的形式将不会添加任何新行。在console.log中，我可以看到事件处理程序只处理原始表单元素，而不是新的产品输入行。我有一个简短的小提琴我在这里工作：

以下是我的jQuery：

$（文档）.ready（函数（）{
（功能（）{
var start=$（“表”），
newRow=$（添加一行）；
$（'.addRow'）。在（'click'，函数（）{
$（开始）.append（新行）；
console.log（this）；
});
})（）；//结束SIAF
}); //结束文件准备就绪

这是我的表格：

姓名：



电邮：



公司：



电话：



送货地址：



采购订单编号：



如果您有订单文件，请将其附在此处：




量
产品编号
产品说明
添加一行

特别送货说明：

有人能给我解释一下这段代码出了什么问题吗？我对jQuery/Javascript相当陌生，所以我不明白为什么这段代码只工作一次，但在随后单击“添加一行”链接之后不能工作，而且只能在原始的“添加一行”链接上工作，而不能在新创建的链接上工作。

试试这个

$（'form'）。在（'click'，'addRow'，函数（）{
var start=$（“表”），
新行=$（“”+
'' +
'' +
“
添加一行”
”；
$（开始）.append（新行）；
});

将变量放入click处理程序中，并通过将表单作为上下文来使用事件委派

$（'form'）。在（'click'，'addRow'，函数（）{
var start=$（“表”），
新行=$（“”+
'' +
'' +
“
添加一行”
”；
$（开始）.append（新行）；
});

---

将变量放入click处理程序中，并通过将表单作为上下文来使用事件委派

我做了一些类似于johnathan的事情，只是没有那么快

在这里拉小提琴：

（函数（）{
var start=$（“表”），
newRow='
添加一行；
$（文档）.on（'单击'，'.addRow'，函数（）{
$（开始）。追加（$（新行））；
});
})(); //端SIAF

我使用的主要更改是将

newRow

设置为一个字符串，因为声明元素只允许附加一次。重新附加时需要重新声明（jonathan通过在处理程序中移动声明实现了这一点）

---

还包括了对上的

的正确用法，以便将其附加到新元素。
我做了一些类似于johnathan的事情，只是没有那么快

在这里拉小提琴：

（函数（）{
var start=$（“表”），
newRow='
添加一行；
$（文档）.on（'单击'，'.addRow'，函数（）{
$（开始）。追加（$（新行））；
});
})(); //端SIAF

我使用的主要更改是将
newRow
设置为一个字符串，因为声明元素只允许附加一次。重新附加时需要重新声明（jonathan通过在处理程序中移动声明实现了这一点）

还包括对

上的的正确用法，以便将其附加到新元素。

工作 我想这就是你需要的。对于动态加载的元素，委托

$（document）.on（）比普通函数（）更为必要，因为普通事件仅在页面加载时起作用

这是密码

$(document).ready(function () {

    var start = $('table'),
        newRow = '<tr><td><input type="text" class="quantity" /></td><td><input type="text" class="prodNum" /></td><td><textarea cols="15" rows="1"></textarea></td><td><p class="addRow">Add a Row</p></td></tr>';


    $(document).on('click', '.addRow', function () {
        $(start).append(newRow);
    });
}); //end document.ready

$（文档）.ready（函数（）{
var start=$（“表”），
newRow='
添加一行；
$（文档）.on（'单击'，'.addRow'，函数（）{
$（开始）.append（新行）；
});
}); //结束文件.ready

希望这有帮助，谢谢你的工作
我想这就是你需要的。对于动态加载的元素，委托
$（document）.on（）比普通函数（）更为必要，因为普通事件仅在页面加载时起作用

这是密码

$(document).ready(function () {

    var start = $('table'),
        newRow = '<tr><td><input type="text" class="quantity" /></td><td><input type="text" class="prodNum" /></td><td><textarea cols="15" rows="1"></textarea></td><td><p class="addRow">Add a Row</p></td></tr>';


    $(document).on('click', '.addRow', function () {
        $(start).append(newRow);
    });
}); //end document.ready

$（文档）.ready（函数（）{
var start=$（“表”），
newRow='
添加一行；
$（文档）.on（'单击'，'.addRow'，函数（）{
$（开始）.append（新行）；
});
}); //结束文件.ready

希望这能有所帮助，谢谢您将新行粘贴到函数中并使函数递归，不要忘记清除并重新分配事件处理程序，否则您将得到比您想要的更多的新行

var start = $('table');

function addRow(){    
    newRow = $('<tr><td><input type="text" class="quantity" /></td><td><input type="text" class="prodNum" /></td><td><textarea cols="15" rows="1"></textarea></td><td><p class="addRow">Add a Row</p></td></tr>');
    $(start).append(newRow);
    $('.addRow').off('click');
    $('.addRow').on('click', function() {
        addRow();
    });
}

$('.addRow').on('click', function() {
    addRow();
});

var start=$（'table'）；
函数addRow（）{
newRow=$（'
添加一行