Bootstrap，模态中的jQuery不起作用

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() 的不必要范围，请根据您的上下文使其更具体。

顺便说一句：听从 George 的建议，确保你的 id 都是唯一的，否则你会遇到问题。