使用jquery从html表中删除动态添加的行时发出问题 [英] Issue while removing a dynamically added row from a html table using jquery

问题描述

我正在创建一个动态表，在按钮单击时添加一个新行。
此表包含一个名为删除的列。每当删除a-link时，都会删除相应的行。但我的 jquery 无效。

I was creating a dynamic table where a new row is added on a button click. This table contains a column called Delete. Whenever, delete a-link is clicked, the corresponding row is to be deleted. But my jquery is not working.

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

The snippet that deletes entry from table is:

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


                        }
                    ); 

这是jsfiddle LINK

Here is the jsfiddle LINK

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

Update: Please Note I am successfully able to delete those row which are not added dynamically. Even the alert is not invoked when I click on Delete a-link column of the row added dynamically.

推荐答案

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

Since the .delRow is not present at the time the page loads you need to use .on to bind the event handler to dynamically created elements.

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

To use this form of on we first use jQuery to select an existing static parent of the element we would like to bind our event handler. The chosen parent should be as close to the target element as possible to improve performance. We next specify the events that should be handled and the selector for our target element. Finally, the event handler is provided.

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

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

文档

这篇关于使用jquery从html表中删除动态添加的行时发出问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！