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(),根据您的上下文使其更具体.

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