使用 jquery 从 html 表中删除动态添加的行时出现问题答案

【问题标题】：Issue while removing a dynamically added row from a html table using jquery使用 jquery 从 html 表中删除动态添加的行时出现问题
【发布时间】：2013-07-16 19:31:53
【问题描述】：

我正在创建一个动态表，其中在单击按钮时添加了一个新行。此表包含一个名为Delete 的列。每当单击删除链接时，将删除相应的行。但是我的 jquery 不工作。

从表中删除条目的sn-p是：

$(".delRow").click(function()
                        {
                            alert("Called");
                             $(this).parents('tr').first().remove();


                        }
                    );

这里是 jsfiddle LINK

更新：请注意，我已成功删除那些未动态添加的行。当我单击删除动态添加的行的链接列时，甚至不会调用警报。

【问题讨论】：

Event binding on dynamically created elements? 的可能副本。这个问题每天被问 4/5 次。

标签： javascript jquery

【解决方案1】：

由于页面加载时.delRow 不存在，您需要使用.on 将事件处理程序绑定到动态创建的元素。

要使用on 的这种形式，我们首先使用jQuery 来选择我们想要绑定事件处理程序的元素的现有静态父元素。选择的父元素应尽可能靠近目标元素以提高性能。我们接下来指定应该处理的事件和目标元素的选择器。最后，提供事件处理程序。

            /*Remove Text Button*/
            $("#sample-table").on("click", ".delRow", function()
                {
                    $(this).parents("tr").remove();
                }
            );

工作示例 http://jsfiddle.net/qRUev/2/

Documentation

【讨论】：

嘿，这是正确的，但为什么不 $(this).closest('tr').remove();而不是 $(this).parents("tr").remove();，因为最接近会提高性能
@ravi-mone 你能提供一些可以提高性能的文档吗？我对此很感兴趣，但我必须说我不知道具体要寻找什么。

【解决方案2】：

尝试使用

$('.delRow').live('click', function (){
   alert("Called");
});

而不是

$(".delRow").click(function(){
   alert("Called");
});

【讨论】：

【解决方案3】：

你可能需要使用

$(document).on('click', ".delRow", function()
                    {
                        alert("Called");
                         $(this).parents('tr').first().remove();


                    }
                );

演示：Fiddle

【讨论】：