按钮在Javascript中没有响应/没有绑定

Question

我在Javascript中有两个函数,如下所示:

function Add(){

    $("#tbl tbody").append(
        "<tr>"+
        "<td><input type='text'/></td>"+
        "<td><input type='text'/></td>"+
        "<td><input type='text'/></td>"+
        "<td><button class=\"btn btnSave\"><i class=\"icon-ok\"></i></button><button class=\"btn btnDelete\"><i class=\"icon-remove\"></i></button></td>"+
        "</tr>"

    );

    $(".btnSave").bind("click", Save);      
    $(".btnDelete").bind("click", Delete);

};

和

function Delete(){ 
    var par = $(this).parent().parent(); 
    par.remove(); 
};

最后这两行功能:

$(".btnDelete").bind("click", Delete);
$("#btnAdd").bind("click", Add);

函数Add()向id为tbl的表添加一个新行.新添加的行中的最后一列有两个按钮btnSave和btnDelete.从Delete()函数可以明显看出btnDelete应该删除该特定行.(我还没有开始实现'保存'功能).但是,每当我点击"删除"按钮时,都没有任何反应.代码有问题吗？

我正在为我的UI 使用bootstrap css.

函数Add()顺便运行.

编辑:这是一个截屏.突出显示的按钮交叉不起作用.

Answer 1

这可能是由重复事件绑定引起的,请尝试以下代码:

function Add(){

    $("#tbl tbody").append(
        "<tr>"+
        "<td><input type='text'/></td>"+
        "<td><input type='text'/></td>"+
        "<td><input type='text'/></td>"+
        "<td><button class=\"btn btnSave\"><i class=\"icon-ok\"></i></button><button class=\"btn btnDelete\"><i class=\"icon-remove\"></i></button></td>"+
        "</tr>"

    );
};

// it will also be affected for new objects
$(document).on("click", ".btnSave", Save);
$(document).on("click", ".btnDelete", Delete);