委托使用jQuery動態創建的表中的多個事件

Question

首先，很抱歉，這是一個愚蠢的問題，但是我已經找了幾天，找不到解決方案。

事實是，我的頁面中有兩個不同的表（具有不同的ID）是動態創建的（使用PHP和從phpMyAdmin檢索的信息）。 表一的每一行的最后，包括6個（隱藏的2個）不同的按鈕（一個元素），用於處理不同的事件。 這些事件是由我的文件edit_user.js中包含的jQuery函數觸發的

這些事件之一，將刪除單擊元素所在的行，並將信息作為新行添加到第二個表中。

與表1一樣，表2的最后一個包含2個具有不同功能的不同按鈕（也包含一個元素）。 這些功能之一與前面注釋的功能完全相反：將有問題的行返回到Table1。

除了那些新插入的行，其他所有內容都可以正常工作，因為a元素不執行任何操作。

我了解了委派，並更改了文件偵聽這些點擊的方式，但仍然無法使它正常工作：

    $(document).ready(
            function() {
                // Set handlers for myTable
                $('table#myTable td').on('click','a.userErase',erase)
                .on('click','a.userEditable',edit)
                .on('click','a.userSuspend',suspend); 

                // Set handlers for suspTable
                $('table#suspTable td ').on('click','a.userErase',erase)
                .on('click','a.userResume',resume);
            });

我的問題基本上是有兩個函數， resume和suspend ，因為它們是在表中創建新行的函數，但是我想它們沒有委托，因為新行調用了不同的函數：

表格1

表2

為了更好地理解，每個表中都有以下功能：

表格1

1. 編輯
2. 更改密碼
3. 暫停
4. 抹去
5. accept_edit（僅在選擇編輯后可見）
6. cancel_edit（僅在選擇編輯后可見）

表2

1. 恢復
2. 抹去

我用這樣的代碼生成新行（工作正常，但處理程序無法到達事件）：

    // create a row with the info to add in suspendedTable
    var html = "<tr data-row-no=" + nextIndex + " height=\"35\"><td><div    contentEditable=\"false\" style=\"width: 100%; height: 100%;\">"+ pName 
                            + "</div></td><td><div contentEditable=\"false\" style=\"width: 100%; height: 100%;\"> "+ pSurname 
                            + "</div></td><td><div contentEditable=\"false\" style=\"width: 100%; height: 100%;\"> "+ pEmail 
                            + "</div></td><td><div contentEditable=\"false\" style=\"width: 100%; height: 100%;\"> "+ pUsername 
                            + "</div></td><td align=\"center\"> <a class=\"userResume\" id=\"resume-"+user_id + "\" href=\"#\" title=\"Activar l'usuari\">"
                            + "<i class=\"fa fa-smile-o\"></i></a></td><td align=\"center\"> <a class=\"userErase\" id=\"erase-"+user_id + "\" href=\"#\" "
                            + "title=\"Eliminar l'usuari\"><i class=\"fa fa-trash\"></i></a></td></tr>\n"

                $('#suspTable tr:last').after(html); 

該功能還可以，如果我刷新頁面，一切都可以正常工作，但是直到那一刻，我仍無法使這些新行正常工作。

有沒有一種方法可以直接從這些新生成的行（如JavaScript中的onClick）調用該函數？ （我試過了，但是都沒有起作用）。

提前致謝，

Answer 1

您只是將事件委派得太深。 將處理程序添加到table而不是td ：

$('table#myTable').on('click','a.userErase',erase)...

因為#myTable停留在頁面上並且事件綁定到該頁面，所以它也將捕獲其中的點擊，對於新創建的行也是如此。