jquery动态添加表格数据注册事件无效的处理办法

今天在做分页的时候遇到了一个问题，就是append动态添加的tr行实现表格行添加，但是在删除某一行的时候发现注册的jquery事件不好使了，可原来静态的时候明明是好使的。经过一番寻找，终于明白了怎么回事，其实就是执行顺序的问题。

---

原因：append中的节点是在整个文档加载完之后开始添加，因此页面不会为append的元素初始化添加点击事件

解决办法：使用事件委托的方式，将指定的事件绑定在document上（前端的委托不是太理解）

---

直接上代码：

1.在#stuList处动态添加表格行

 <table class="table table_color table-striped">
            <tr class="book_top">
                <th>发布时间</th>
                <th>新闻标题</th>
                <th>新闻分类</th>
                <th>操作</th>
            </tr>
            @*用tbody来接收，否则将会替换掉头部*@
            <tbody id="stuList"></tbody>

 2.通过控制器传递来的数据一行一行动态添加到#stuList处

 //遍历集合，并添加查询结果
            for (var i = 0; i < list.length; i++) {
                var date = ChangeDateFormat(list[i].PublishTime);
                var studiv = "<tr>"
                    + "<td>" + date + "</td>"
                    + " <td> <a href='/News/NewsDetail?newsId=" + list[i].NewsId + "' target='_blank'>" + list[i].NewsTitle + "</a></td>"
                    + " <td>" + list[i].CategoryName + "</td>"
                    + " <td class='book-title'>"
                    + " <a class='' href='/WebHotelManage/News/ShowNewsDetail?newsId=" + list[i].NewsId + "&categoryId=" + list[i].CategoryId + "'>修改</a>"
                    + " <a name='" + list[i].NewsId + "'class='btndelete' style='cursor:pointer'>删除</a>"
                    + " </td></tr>"

                $("#stuList").append(studiv); //使用append方法追加项目
            }

3.效果图如下：

结果发现删除不好用了，修改是没有问题的。

4.删除jquery事件

 @*异步删除*@
    <script type="text/javascript">
        $(function () {
            $(document).on("click", ".btndelete", function () {
                if (!confirm("确定要删除吗?")) { return; }
                var newid = $(this).attr("name");
                var tr = $(this).parent().parent();
                $.post("/WebHotelManage/News/DeleteNews", { "newsId": newid }, function (data, status) {
                    if (data == "success") {
                        tr.remove();
                    }
                    else {
                        alert("删除失败");
                    }
                })
            })
        })
    </script>

 注意：

这里一定要这样添加事件（否则无效）：

无效做法如下：

修改后就可以正常点击删除了：

 除了这个方法，在网上还有将click方法改为live()方法，这个方法经过我得实验没有成功。（注意此方法对jquery版本有要求，不能太高）

详细请参考：https://blog.csdn.net/drive_/article/details/78170099

原文请参考：https://blog.csdn.net/Miss_liangrm/article/details/96010316?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task