php - 删除表 AJAX PHP MySQL 中的行后重新加载 div

Question

我创建了一个用户界面来允许人们进行简单的 CRUD 操作，为此我使用 AJAX PHP 和 JQUERY。我第一次能够在页面加载时删除行。但是在我点击重新加载包含表格的 div 的重新加载按钮后，我无法删除另一个项目。

我的问题是，我该怎么做？

索引.php

  <div id="table-reload" class="container-fluid">
      <?php

        include("dbServer.php");


        $sql = "SELECT * FROM product";

        $result = $db->query($sql);

        if ($mysqli->connect_errno) {
          printf("Connect failed: %s\n", $mysqli->connect_error);
          exit();
        }
        // Printing all DataBase Items
        echo "<table><tr><th>ID</th><th>Name</th></tr>";

        while ($row = $result->fetch_object()) {

          $id = $row->id;
          $name = $row->name;
          $description = $row->description;
          $price = $row->price;
          $picture = $row->picture;

          echo "<tr><td>".$id."</td><td>".$name."</td><td>".$description."</td><td>".$price."</td><td>".$picture."</td><td><button data-id='".$id."' class='delete btn btn-light'>DELETE</button></td><td><button class='update btn btn-light'>UPDATE</button></td>";
        }

        echo "</table>";



      ?>

    </div>

    <!-- Reload Button -->

    <button id="reloader" class="container-fluid btn btn-primary" type="button" name="button">Reload</button>

index.js

  $("#reloader").click(function(){
    $("#table-reload").load(" #table-reload");
  });

  $(".delete").click(function(){

    var obj = $(this);
    console.log($(this));
    var deleteId = $(this).data('id');
    console.log(deleteId);

    $.ajax({
      url: "delete.php",
      method: "POST",
      data: {id: deleteId},
      success: function(){
        $(obj).closest('tr').fadeOut(1000, function(){
          $(this).remove();
        });
      }
    });
    return false;

  });

删除.php

<?php include ("dbServer.php");

  $id = 0;
  if (isset($_POST['id'])){
    $id = mysqli_real_escape_string($db, $_POST['id']);
  }

  if ($id > 0) {
    //Checking if item with id exists in db
$checkRecord = mysqli_query($db, "SELECT * FROM product WHERE id=".$id);
    $totalRows = mysqli_num_rows($checkRecord);

    if ($totalRows > 0){
      //Delete record
      $query = "DELETE FROM product WHERE id=".$id;

      if ($db->query($query) === TRUE){
        echo "data deleted";
      }
      else {
        echo "failed to delete";
      }
    }
  }


?>

标签： phpjquerymysqlajaxweb