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

Question

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

从表中删除条目的片段是：

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


                        }
                    ); 

这是jsfiddle LINK

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

Answer 1

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

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

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

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

文档

Answer 2

尝试使用

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

代替

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

Answer 3

你可能需要使用

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


                    }
                ); 

演示：小提琴