Question

我正在创建一个页面，您可以在其中检查表格中的几行，然后将其导出。

以下是代码http://www.bootply.com/Hrll6yz0c1

为模态导出菜单添加行的代码效果很好，但删除模式中的行的代码不起作用。

删除代码

$('button#delB').click(function() {
     $(this).parent().parent().remove();
});

对于此生成的表

$('button#addB').click(function() {
                        var toAdd = $(this).parent().parent().find("#sub_id").html();
                        var toAdd2 = $(this).parent().parent().find("#val1").html();   
                        var toAdd3 = $(this).parent().parent().find("#val2").html(); 
                        $('#tblGrid').append("<tr><td>"+toAdd+"</td><td>"+toAdd2+"</td><td>"+toAdd3+"</td><td><button type='button' class='btn btn-default glyphicon glyphicon glyphicon-remove' id='delB'></button></td></tr>"); 

 });

我尝试使用相同的代码删除外部模态并且它正在工作。

Answer 1

我怀疑，delB元素是动态生成的。因此，在您尝试将click事件处理程序绑定到它们时，它们不存在。因此，on()更适合您尝试做的事情：

$(document).on('click','button#delB',function() {                      
   $(this).parent().parent().remove();
});

http://api.jquery.com/on/

注意：$(document)很可能on()是一个不必要的范围，可以根据您的具体情况调用{{1}}，使其更具体。

顺便说一句：听从乔治的建议，确保你的ids都是独一无二的，否则你会遇到问题。

Bootstrap，模式中的jQuery不起作用

1 个答案: