使用 AJAX 和 PHP 在单击按钮时更新数据库 - Update database on buttonclick with AJAX and PHP

我已经搜索了所有内容，但找不到解决方案。我仍然是PHP和AJAX的初学者，所以请耐心等待。

我有一个文件提取.php它为我的页面索引生成内容.html。Fetch.php 从 MySQL 数据库中获取数据并将其添加到我的索引页面，如下所示：

while ($res = mysqli_fetch_array($rs)) {
$str .= '<div class="task" id='.$res['tid'].'>
      <table>
              <tr>
                      <td>
                      <button class="btnDelete" data-id="'.$res['tid'].'">x</button>
                      </td>
                      <td>'.$res["name"].'</td>
              </tr>
              <tr>
              <td>'. $res["task"].'</td></tr></table></div>';
}
echo $str;

"tid"是我的表索引。现在，当我单击数据 id 为 1 的按钮时，我想删除 tid 为 1 的行。

<script type="text/javascript">
$('.btnDelete').click(function() {
var recordid = $('.btnDelete').data('id');
$.ajax({
  type: 'POST',
  url: 'remove.php',
  data: { 'id': recordid},
});
});
</script>

这会将（应该）数据 ID 发送到以下 PHP。

  $con = mysqli_connect(HOST,USERNAME,PASSWORD,DB);
 if (!$con) {
die("Can not connect: " .mysql_error());
}
$id = $_POST['recordid'];
$sql = "UPDATE tasks SET visible = 'hide' WHERE tid = $id ";
$query = mysqli_query($con, $sql);
if(mysqli_affected_rows($con)) {
    echo "Record deleted successfully";
}
mysqli_close($con);

我的PHP文件可以工作，但是当我单击按钮时没有任何反应？以下是我的完整 HTML：

<!DOCTYPE html>
<html>
 <head>
 <title>test</title>
 <link rel="stylesheet" type="text/css" href="style.css">
 <script src='https://code.jquery.com/jquery-2.1.3.min.js'></script>

<script type="text/javascript">
$(function() {
    getStatus();
});
function getStatus() {
    $('div#data').load('fetch.php');
    setTimeout("getStatus()",300000);
}
</script>

 </head>
 <body>
    <div id="data"> 
    </div>
    <script type="text/javascript">
$('.btnDelete').click(function() {
    var recordid = $('.btnDelete').data('id');
   $.ajax({
      type: 'POST',
      url: 'remove.php',
      data: { 'id': recordid},
   });
});
</script>
 </body>
</html>

如何让 AJAX 在单击按钮时触发并发送要删除的数据 ID .php？

这不是重复的，它是一个AJAX问题，而不是MySQL问题

当您的AJAX加载您的HTML并将其注入页面时，您必须在绑定时使用on事件。

$(document).on("click", ".btnDelete", function () {
    /** Your code here. **/
});

阅读材料

事件委派