javascript - 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 元素是动态生成的。因此，当您尝试将单击事件处理程序绑定(bind)到它们时，它们并不存在。因此 on() 更适合您想要做的事情:

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

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

注意:$(document) 很可能是调用 on() 的不必要范围，请根据您的上下文使其更加具体。

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