使用jQuery没有检测到用按钮追加行[button.class]

Question

好吧，我基本上有一张由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表，该行表示，并添加到数据库中正确的，但删除按钮不弹出模态删除行。它只会在页面刷新时删除。

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

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

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