Javascript 使用Jquery创建新的表行，并将带有动态id的按钮添加到表单元格中

我正在尝试使用jQuery动态创建和删除一个表行。当添加行部分工作时，删除行不工作，因为onclick事件将附加到动态创建的按钮。我该如何解决这个问题

名字
姓
添加行
var-rowIndex=0；
$（“#addrow”）。在（'click'，function（）上{
rowIndex++；
变量newRow=''''+'''+
'';
$（“#申请表>正文>tr:last”）。在（新行）之后；
});
$（.removeow”）。在（'click'，function（）上{
警惕（“你好”）；
});

您必须使用创建“

委托的

”绑定

也可以使用非动态父对象

$("#applicanttable").on('click','.removerow',function(){
//do alert here 
});

或者你可以做一个函数

function removeRow(thisObj){
}

然后将

onclick=“removeRow（this）”

放入，您必须使用创建一个“

委托的

”绑定

也可以使用非动态父对象

$("#applicanttable").on('click','.removerow',function(){
//do alert here 
});

或者你可以做一个函数

function removeRow(thisObj){
}

---

然后放置

onclick=“removeRow（this）”

用jQuery而不是字符串创建元素，您可以立即附加事件处理程序，下面是一个按钮示例，其余元素可以用相同的方式创建

var row = $('<tr />');

var btn = $('<input />', {
    type     : 'button',
    'class'  : 'removerow',
    id       : 'removerow' + rowIndex,
    name     : 'removerow' + rowIndex,
    value    : 'Remove',
    on       : {
        click : function() {
            $(this).closest('tr').remove();
        }
    }
});

row.append(btn);

$("#applicanttable > tbody > tr:last").after(row);      

var行=$（''）；
变量btn=$（''{
键入：“按钮”，
'class'：'removerow'，
id:'removerow'+行索引，
名称：'removerow'+行索引，
值：“删除”，
关于：{
单击：函数（）{
$（this）.closest（'tr'）.remove（）；
}
}
});
行追加（btn）；
$（“#申请表>正文>tr:last”）。在（第行）之后；

使用jQuery而不是字符串创建元素，您可以立即附加事件处理程序，下面是一个按钮示例，其余元素可以用相同的方式创建

var row = $('<tr />');

var btn = $('<input />', {
    type     : 'button',
    'class'  : 'removerow',
    id       : 'removerow' + rowIndex,
    name     : 'removerow' + rowIndex,
    value    : 'Remove',
    on       : {
        click : function() {
            $(this).closest('tr').remove();
        }
    }
});

row.append(btn);

$("#applicanttable > tbody > tr:last").after(row);      

var行=$（''）；
变量btn=$（''{
键入：“按钮”，
'class'：'removerow'，
id:'removerow'+行索引，
名称：'removerow'+行索引，
值：“删除”，
关于：{
单击：函数（）{
$（this）.closest（'tr'）.remove（）；
}
}
});
行追加（btn）；
$（“#申请表>正文>tr:last”）。在（第行）之后；

注意，

新行的
处缺少结账信息。尝试使用选择器
[class^=removerow]
将
单击
事件委派给
文档
，
以
“removerow”
开始选择具有
类的元素。还可以尝试调整
#addRow
单击
事件以包括
if
条件，该条件检查
#applicationtable>tbody>tr
是否存在于
DOM
中；如果没有，则将
newRow
附加到
#applicationtable>t正文
var行索引=0；
$（“#addrow”）。在（'click'，function（）上{
rowIndex++；
var newRow=“”+
'"' +
'';
如果（$（“#申请表>正文>正文”）为（“*”）
$（“#应用程序表>正文>tr:last”）。之后（新行）
else$（“#applicationTable>tbody”）.append（newRow）
});
$（文档）。在（'单击'，“[class^=removerow]”上，函数（）{
$（this.parents（“tr”）.remove（）；
});

名字
姓
添加行
注意，
新行的
处缺少结账信息。尝试使用选择器
[class^=removerow]
将
单击
事件委派给
文档
，
以
“removerow”
开始选择具有
类的元素。还可以尝试调整
#addRow
单击
事件以包括
if
条件，该条件检查
#applicationtable>tbody>tr
是否存在于
DOM
中；如果没有，则将
newRow
附加到
#applicationtable>t正文
var行索引=0；
$（“#addrow”）。在（'click'，function（）上{
rowIndex++；
var newRow=“”+
'"' +
'';
如果（$（“#申请表>正文>正文”）为（“*”）
$（“#应用程序表>正文>tr:last”）。之后（新行）
else$（“#applicationTable>tbody”）.append（newRow）
});
$（文档）。在（'单击'，“[class^=removerow]”上，函数（）{
$（this.parents（“tr”）.remove（）；
});

名字
姓
添加行
我将选择器
.removeow
作为事件侦听器上
的第二个参数，以便它连接到动态元素

$(document).on('click', '.removerow', function() {
  $(this).parents('tr').remove();
});

您可以测试我将选择器
.removerow
作为
事件侦听器上
的第二个参数，以便它连接到动态元素

$(document).on('click', '.removerow', function() {
  $(this).parents('tr').remove();
});

您可以测试使用
函数removeRow（thisObj）
并将
onclick=“removeRow（this）”
或do
$（document）。在（'click'，'.removeRow'，function（）{
上，您要删除哪一行？最上面的？@anilpawar为其“删除”的行按钮被单击。我只是在该函数中有一条警报消息，因为我想检查事件是否被触发。以$（“#tableId”）的形式执行。在（“单击”，“添加行”，函数（）{//add row code}）。在（“单击”，“删除行”，函数（e）{var btnClicked=this.attr（“id”）；警报（btnClicked）；}）；使用
函数删除行（thisObj）
并将
onclick=“removeRow（this）”
或do
$（document）。在（'click'，'.removeRow'，function（）{
要删除哪一行？最顶端？@AnilPanwar单击“删除”按钮的行。我只是在该函数中有一条警告消息，因为我想检查事件是否被触发。按$（）#tableId“）。在（“单击”，“添加行”，函数（）{//add row code}）上。在（“单击”，“删除行”，函数（e）{var btnClicked