Question

我有一个函数可以生成应用程序的html table个用户。每个表格行都有一个操作选项，用于编辑或停用用户。这一切都是由AJAX完成的。

看起来像是

<tr><td><a id='edit_link' href=''>Edit</a></td></tr>

JQuery在现有html table

中追加

所以这就是我所做的。

function loadAllUsersToTable(){
    $.ajax({
        url: 'controller/get_all_users.php',
        type: 'POST',
        dataType: 'json',
        success: function(userData){
            console.log(userData);
            var len = userData.length;
            $('#table_users_record').find("tr:not(:first)").remove();
            for (var i = 0; i < len; i++) {
                var userId = userData[i]['id'];
                var userName = userData[i]['username'];
                var lastName = userData[i]['lastname'];
                var firstName = userData[i]['firstname'];
                var middleInitial = userData[i]['middleinitial'];
                var roleName = userData[i]['roleName'];
                var isActive = userData[i]['isactive'];
                $('#table_users_record').append(
                    "<tr><td>" + userId + "</td>" +
                    "<td>" + roleName + "</td>" +
                    "<td>" + userName + "</td>" +
                    "<td>" + lastName + "</td>" +
                    "<td>" + firstName + "</td>" +
                    "<td>" + middleInitial + "</td>" +
                    "<td>" + isActive + "</td>" +
                    "<td>" + "<a id='edit_link' href=''>" + "Edit" +"</a>" + "</td>" +
                    "<td>" + "<a id='' href=''>" + "Deactivate" +"</a>" + "</td>" +
                    "</tr>"
                );
                $('#edit_link').click(alert("test")); //alert() executes everytime a row data is appended to table.
            }
        },
        error: function (x, e) {
            if (x.status == 0) {
                alert('You are offline!!\n Please Check Your Network.');
            } else if (x.status == 404) {
                alert('Requested URL not found.');
            } else if (x.status == 500) {
                alert('Internal Server Error.');
            } else if (e == 'parsererror') {
                alert('Error.\nParsing JSON Request failed.');
            } else if (e == 'timeout') {
                alert('Request Time out.');
            } else {
                alert('Unknown Error.\n' + x.responseText);
            }
        }
    });
}

我的目标是：

单击编辑链接时显示模式Div。（我尝试过，但无法做到正确）
通过<a>标记传递用户ID 和/或其他用户属性（我还不知道如何执行此操作）

行$('#edit_link').click(alert("test"));的问题在于，每次在DOM中呈现或准备行时都会执行，而不是在单击链接时执行。它应该只在单击链接时执行。

我怎样才能实现它们？

我很感激任何建议。

Answer 1

这是一项功能分配。替换：

$('#edit_link').click(alert("test"));

使用：

$('#edit_link').click(function () {
  alert("test")
});

但最终，我建议你看看Event binding on dynamically created elements?。这是正确的方法。

Answer 2

id edit_link需要有所不同。你不能重复使用它。只需添加用户ID即可。

我建议在所有编辑按钮上使用类（例如编辑），并在for循环后执行click事件绑定。

"<a id='edit_link" + userId + "' class='edit' href=''>Edit</a>"

事件绑定

$('.edit').click(function(ev){
    ev.preventDefault();
    //do something with click

});

在AJAX调用生成的html表上应用单击操作

2 个答案: