使用jquery從html表中刪除動態添加的行時發出問題

Question

我正在創建一個動態表，單擊按鈕會在其中添加新行。 該表包含一個名為Delete的列。 無論何時單擊刪除鏈接，都將刪除相應的行。 但是我的jquery沒有用。

從表中刪除條目的代碼段是：

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


                        }
                    ); 

這是jsfiddle LINK

更新 ：請注意，我能夠刪除那些沒有動態添加的行。 當我單擊“動態添加的行的刪除a-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();


                    }
                ); 

演示： 小提琴