js动态添加的标签，操作按钮点击不生效

Question

        // 添加行
        $(".addTr").click(function () {
            var trLength = $(this).parent().parent().parent().parent().find("tr").length-1;
            var table =$(this).parent().parent().parent().parent();
            var currentRow =$(this).parent().parent();
            if(trLength==1){
                currentRow.replaceWith("<tr>"+
                    "<td align=\"center\"><input type=\"text\" disabled value=\"0\"> <= x < <input type=\"text\"></td>"+
                    "<td align=\"center\"><input type=\"text\"></td>"+
                    "<td align=\"center\"><span class=\"addLine removeTr\">删除行</span></td>"+
                    "</tr>"+"<tr>"+
                    "<td align=\"center\"><input type=\"text\"> <= x < <input type=\"text\" disabled value=\"无限大\"></td>"+
                    "<td align=\"center\"><input type=\"text\"></td>"+
                    "<td align=\"center\"><span class=\"addLine addTr\">添加行</span></td>"+
                    "</tr>");
            }else{
                var addtr = $("<tr>"+
                    "<td align=\"center\"><input type=\"text\"> <= x < <input type=\"text\"></td>"+
                    "<td align=\"center\"><input type=\"text\"></td>"+
                    "<td align=\"center\"><span class=\"addLine removeTr\">删除行</span></td>"+
                    "</tr>");
                currentRow.before(addtr);
            }
        })
        // 删除行
        $(".removeTr").click(function () {
            $(this).parent().parent().remove();
        })

Answer 1

给 $(".removeTr") 绑定事件的时候他还没被渲染出来，就绑定不了。
给动态生成的标签绑定事件，可以委托给一个长期存在的祖先元素：

 $(".addTr").on('click', '.removeTr', function(){
    //...
 });

当然，也可以使用 delegate 。

Answer 2

代码是从上至下执行的，所以执行到给.removeTr绑定单击事件时还没找到这个元素，以至于事件未生效。
即，无法对一个不存在的dom节点绑定事件

---

• 如何解决？

1. 在动态添加dom节点后绑定事件，即把.removeTr绑定事件的代码移动到currentRow.before(addtr);之后。这样就可以保证在绑定事件时，该节点存在，绑定事件可以生效。缺点是绑定事件的代码需要移动到节点添加的代码中，代码看起来乱。所以一般不采用这种方式。
2. 事件委托，即将点击事件委托给父级,然后派发给子级。这样的话不管节点在与否,事件都是是存在于父级的，等子节点存在后事件就会被派发给该节点。

jQuery的事件委托有以下例子

抛砖引玉，$.delegate ，在你的代码中可以将事件绑定到table节点上，派发给.removeTr

$('父级节点').delegate('欲绑定事件的子级节点','事件',function(){
    // code
});

 $('#tableId').delegate('.removeTr','click',function(){
    // code
});

$.on，用法与delegete大同小异，推荐用此方法。实际上.on来自于delegete.

$("父级节点").on('事件','欲绑定事件的子级节点',function(){
    // code
});
$("#tableId").on("click",".removeTr",function(){
    // code
});