给DOM操作生成的元素添加事件

问题：通过js给页面添加新元素，并给该元素添加绑定事件，但新添加的元素上却没有绑定任何事件。

常见例子：在处理表格的时候，每行行末有个删除按钮，如下图。点击删除按钮的时候删除这一行。

//html部分
    <table border="" cellspacing="" cellpadding="" class="text-center">
            <caption class="text-center">用户信息表</caption>
            <tr>
                <td>序号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
                <td>操作</td>
            </tr>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>男</td>
                <td>18</td>
                <td>
                    <a class="deltr">删除</a>
                </td>
            </tr>
        </table>
        <button class="btn btn-info">添加</button>



//js部分
$(function() {
            $("button").on("click", function() {
                $("table").append('<tr><td>2</td><td>张三</td><td>男</td><td>18</td><td><a class="deltr">删除</a></td></tr>');
            })
            $(".deltr").on("click", function() {
                $(this).parents("tr").remove();
            })
        })

View Code