在使用 jquery 动态创建的表中委托多个事件

Question

首先，如果这是一个愚蠢的问题，我很抱歉，但我已经找了好几天了，我找不到解决方案。

事实上，我的页面中有两个不同的表（具有不同的 ID），它们是动态创建的（使用 PHP 并从 phpMyAdmin 检索信息）。表一中每一行的最后一行，包括 6 个（2 个隐藏的）不同的按钮（一个元素）来处理不同的事件。这些事件由我的文件 edit_user.js

中包含的 jQuery 函数触发

其中一个事件会删除单击元素所在的行，并将信息作为新行添加到第二个表中。

和 table1 一样，table2 的最后一个包括 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 停留在页面上并且事件绑定到它，所以它会捕获其中的点击，对于新创建的行也是如此。