Javascript 单击按钮时创建子表

我正在尝试构建一个可以用HTML和Javascript动态编辑的表

我在父表的一行中有一个按钮，我想在单击按钮时在父表中创建一个子表。 但是我的jquery不是在单击时调用的

类名是.childtbl

编辑

我在每一行都创建了按钮栏标题。按钮只能在第一行点击，我也可以创建表格行，但在第二行我不能只点击按钮！我不知道为什么函数不被调用。你们可以在代码段中看到我的代码

$document.readyfunction{ var i=0； $.addmore.on'click'，函数{ //alertks； var count=$'form_table'[0].rows.length； 警报计数； var数据=+计数+。； 数据+=+添加新标题； $‘表格’。追加数据； i++； }; $.childtbl.“单击”时，函数{ 我来自第二； var count1=$'form_table1'[0].rows.length； 警报计数1； var data1=+count1+。； 数据1+=标题：； $‘表格1’。附录数据1； i++； }; }; 瓦里山的名字 美国号 促销标题 宣传片 1. +添加新标题 1.-> -> +添加新标题

---

问题在于您创建单击事件的方式。它们是在DOM加载并关联到当前按钮时创建的，但是当您以友好方式创建按钮时，事件不会关联到它

要解决此问题，可以使用委派事件。对始终存在的外部元素使用on函数，在您的示例中为table@form_table，并创建与内部按钮关联的单击事件。所以改变这个

$(".childtbl").on('click', function () {

。。。通过这个

$('table#form_table').on('click','button.childtbl',function(e) {

。。。因此，该事件将适用于先前存在的按钮或动态生成的按钮。新on函数中的$this仍然与按钮关联，而不是与表关联

---

我希望它能帮助你工作。有几点：

您的事件侦听器不应尝试侦听动态添加的内容，请参阅，请参阅此代码段JS部分的第8行 您试图通过id var count1=$'form_table1'[0]检索子表；和$'form_table1'.appenddata1；。您必须动态查找被单击的按钮所在的行，这要归功于jQuery事件监听器内部的这个值，请参见第9行 $document.readyfunction{ $.addmore.on'click'，函数{ var count=$'form_table'[0].rows.length； var数据=+计数+。； 数据+=+添加新标题； $‘表格’。追加数据； }; $'formtest'。在“单击”时，'.childtbl'，函数{ var$titleTable=$this.next'table'[0]； var titlescont=$titlesTable.rows.length+1； var data1=+标题计数+。； 数据1+=标题：； $$titleTable.appenddata1； }; }; 瓦里山的名字 美国号 促销标题 宣传片 1. +添加新标题 +添加新标题

---

不确定你的代码有什么问题。您能否提供更多关于预期行为的详细信息，以及实际发生的情况？作为旁注，您实际上不需要在定义的第二个回调函数中向所有变量名添加1。var声明是函数范围的，所以这两个函数的内部变量不会重叠。我在每一行都创建了按钮冒号。按钮是可点击的，我也可以创建表行，但只能在第一行！在第二排，我一点按钮就无法打开桌子！我不知道为什么函数不被调用。你们可以在代码段中看到我的代码@非常感谢你！这是我的工作。但还有一个问题是当我点击第二行的按钮时！我的文本字段是在第一行而不是第二行创建的。这是另一个问题。您正在选择仅存在于第一行中的预创建的tableform_table1。要创建新的子表，我将使用$this.closest'td'获取当前按钮td，并在变量中创建整个新表，然后使用$this.closest'td.添加MyChildTableVar