Javascript jquery-动态添加字段未完全运行

基于中的教程，我尝试创建一些字段，这些字段可以通过一个按钮动态添加，也可以通过另一个按钮删除。它几乎可以正常工作，只是另一组应该动态创建的字段没有添加任何内容

这是我当时所做的

$（文档）.ready（函数（）{
var maxField=10；//输入字段增量限制
var addButton=$（'.add_button'）；//添加按钮选择器
var wrapper=$（'.field_wrapper'）；//输入字段wrapper
var fieldHTML='组名称标记为所需组描述选项标签选项价格（RM）'；//新输入字段html
var AddRow=$（'.add_option'）；//添加按钮选择器
var RowWrapper=$（'.addonoption'）；//输入字段包装器
var rowHTML=''；
var x=1；//初始字段计数器为1
$（AddRow）。单击添加按钮后，单击（函数（）{//）
$（RowWrapper.append（rowHTML）；//添加字段html
});
$（添加按钮）。单击添加按钮后，单击（函数（）{//）
如果（x

参照我在链接代码笔中所做的，当按下“新建组”链接时，字段生成OK。但是，单击按钮“新建选项”后不会创建任何内容。您可以在JS部分看到，我编写了一些代码来创建字段，但它不起作用。知道为什么吗？顺便说一句，我对javascript/jquery很在行，所以，如果这只是一个愚蠢的错误，我很抱歉。提前谢谢

您还需要与

一起使用。添加\u选项

元素。由于它们是在最初呈现DOM之后创建的，因此单击处理程序不会附加到任何内容。您可以对

.remove_按钮

使用事件委派，这样您就可以复制该语法以使其正常工作：

$(document).on("click", ".add_option", function(){ //Once add button is clicked  
    $(this).closest("table").find(".addonoption").append(rowHTML);         
});

---

另外，我注意到您的选择器也可能出错，因为如果您有多个组，它会将html添加到每个组中。如果这是预期的行为，您可以将选择器更改为

$（“.addonoption”）.append（rowHTML）

，否则，上述代码将适用于您

问题是，当您尝试将单击处理程序添加到AddRow时，您的按钮还不存在。您需要使用

函数

，而不是创建AddRow的处理程序。例如：

$(".field_wrapper").on("click", ".add_option", function() {alert("foo");});

说明：

• 调用on时，

  .field\u wrapper

  作为选择器已存在

• 单击

  是您打算处理的事件

• .add\u option

  是一个选择器，它将应用于

  .field\u wrapper

  中匹配

  .add\u option

• 函数是要执行的事件处理程序

---

非常感谢！结合Lajos Arpad answer，它运行良好！

$(".field_wrapper").on("click", ".add_option", function() {alert("foo");});