jQuery[button.class]未检测到用按钮追加行

Appending a row with a button is not detected with jQuery [button.class]

本文关键字：按钮 追加 检测 button class jQuery      更新时间：2023-09-26

好吧，所以我基本上有一个由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>";
     }
}   
?>

为了删除该行，我有一个脚本，在单击按钮时显示一个模态，使用如下所示的数据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追加到表中时，该行会正确显示并添加到数据库中，但删除按钮不会显示删除该行的模式。它只会在刷新页面时删除。

从源代码来看，附加行的代码对我来说还可以

最后，这里是附加行的源代码。

        $('#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>");
            }
            });
        });

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

将按钮事件更改为：

$("#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">
相关文章：