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

Question

我正在创建一个动态表，其中单击按钮即可添加新行。该表包含一个名为删除的列。每当点击删除链接时，相应的行就会被删除。但我的 jquery 无法正常工作。

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

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


                        }
                    ); 

这是 jsfiddle LINK

更新:请注意，我成功删除了那些未动态添加的行。即使当我单击动态添加的行的“删除链接”列时，也不会调用警报。

Answer 1

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

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

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

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

Documentation