Question

我已经搜遍了这个并且找不到解决方案。我仍然是PHP和AJAX的初学者，所以请耐心等待。

我有一个文件fetch.php，它为我的页面index.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”是我的表索引。现在，当我单击data-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>

这会将（假设的）data-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并将data-id发送到remove.php？

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

Answer 1

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

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

阅读材料

Event Delegation

使用AJAX和PHP

1 个答案: