Question

我正在创建一个动态表，在按钮单击时添加一个新行。此表包含一个名为删除的列。每当删除a-link时，都会删除相应的行。但我的 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/

Documentation

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();


                    }
                );

演示：Fiddle

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

3 个答案: