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

Issue while removing a dynamically added row from a html table using jquery

本文关键字：问题 添加 动态 jquery html 删除 使用      更新时间：2023-09-26

我正在创建一个动态表，单击按钮即可添加新行。此表包含一个名为删除的列。每当单击删除链接时，就会删除相应的行。但是我的jquery不起作用。

从表中删除条目的代码段是：

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

                        }
                    );

这是jsfiddle链接

更新：请注意，我可以成功删除那些不是动态添加的行。当我单击动态添加的行的Delete a-link列时，甚至不会调用警报。

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

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

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

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

文档

尝试使用

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

而不是

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

您可能需要使用

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

                    }
                );

演示：Fiddle

相关文章：