javascript - jQuery [button.class] 未检测到添加带有按钮的行

Question

这个问题已经有答案了:

Event binding on dynamically created elements? (23 个回答)

已关闭 8 年前。

好吧，我基本上有一个由 PHP 为每一行绘制的表格。在该行中，我有数据和一个“删除”按钮来删除特定行。

<?php
   if ($result->num_rows > 0) {
     // output data of each row
     while($row = $result->fetch_assoc()) {
         echo "<tr class='btnDelete' data-id=" . $row["username"]. "><td>" . $row["id"]. "</td><td>" . $row["username"]. "</td><td><span class='label label-success'>" . $row["active"]. "</span></td><td><button class='btn btn-danger btnDelete btn-xs' href=''>delete</button></td></tr>";
     }
}   
?>

为了删除该行，我有一个脚本在单击按钮时使用 data-id 显示模式，如下所示。

        $('button.btnDelete').on('click', function (e) {
            e.preventDefault();
            var id = $(this).closest('tr').data('id');
            $('#myModal').data('id', id).modal('show');
            $('#modaltitle').text('User ID: ' + id);    
        });

但是，问题是:当我使用 jQuery append 到表时，该行会显示并正确添加到数据库中，但删除按钮不会调出删除该行的模式。只有刷新页面时才会删除。

从源代码来看， append 行的代码对我来说看起来没问题。

最后，这是 append 行的源代码。

        $('#btnAdd').click(function () {
            var user = $('#user').text();
            var newuser = $('#txtUserAdd').val().toLowerCase();
            var dataString = 'user='+ user.toLowerCase() + '&user2=' + newuser;
           $.ajax({
           type: "POST",
           url: "../adduser.php",
           data: dataString,
           cache: false,
           success: function(result){
           console.log(result);
           $('#userlist tr:last').after("<tr class='btnDelete' data-id="+ newuser + "><td>ID</td><td>" +newuser+ "</td><td><span class='label label-success'>Active</span></td><td><button class='btn btn-danger btnDelete btn-xs' href=''>delete</button></td></tr>");
            }
            });
        });

非常感谢您的帮助，如果您需要更多信息，请告诉我。

Answer 1

将按钮事件更改为:

$("#datatable").on("click", "button", function(event){
            event.preventDefault();
            var id = $(this).closest('tr').data('id');
            $('#myModal').data('id', id).modal('show');
            $('#modaltitle').text('User ID: ' + id);    
        });

地点:

<tbody id="datatable">