jquery ajax публиковать данные в php работает только в первый раз

Question

Я пытаюсь удалить данные, используя jquery ajax в PHP. Я могу удалить данные в первый раз, но это не работает во второй раз. Это работает только тогда, когда я обновляю sh страницу после первого раза. Я проверил ответ HTML по ajax, чтобы убедиться, что все в порядке, но он все еще не работает. Вот мой код.

index. php

 <div class="container">
        <br>
        <button class="btn btn-primary" data-toggle="modal" data-target="#insert">Thêm sinh viên</button>
        <h1 align="center">Bảng sinh viên</h1>
        <table class="table">
            <thead>
                <tr>
                <th scope="col">Mã SV</th>
                <th scope="col">Tên</th>
                <th scope="col">SĐT</th>
                <th scope="col">Giới tính</th>
                <th scope="col">Hành động</th>
                </tr>
            </thead>
            <tbody id="list">
                <?php include('show.php') ?>
            </tbody>
        </table>
    </div>

AJAX

  $(".delete").on('click',function(){
            var id = $(this).data('id');
            var result = confirm("Bạn có muốn xoá sinh viên này không ?");
            if(result){
                $.ajax({
                    type: "POST",
                    url:"delete.php",
                    data: {'id':id},
                    success: function(response){
                        alert("Xoá thành công");
                        document.getElementById("list").innerHTML= response;
                    }
                })
            }
        })

delete. php

require_once('db.php');
    $real_id = $_POST['id'];
    $sql = "DELETE FROM students WHERE real_id = ?";
    //DELETE FROM table_name WHERE condition;
    $stmt  = $mysqli->prepare($sql);
    $stmt->bind_param("s",$real_id);
    $stmt->execute();
    include("show.php");

шоу. php

$data ="";
    while($row = $result->fetch_assoc()){

        $data .="<tr>";
        $data .= "<td>".$row['id']."</td>";
        $data .= "<td>".$row['name']."</td>";
        $data .= "<td>".$row['phone']."</td>";
        switch ($row['sex']) {
            case "1":
                $sex = "Nam";
                break;
            case "2":
                $sex = "Nữ";
                break;
            case "3":
                $sex = "Khác";
                break;
        }
        $data .= "<td>".$sex."</td>"; 
        $realid = $row['real_id'];
        $data .= "<td><button class='btn btn-danger delete' data-id='$realid'>Xoá</button></td>";
        $data .="</tr>";  
    }
    echo($data);

Answer 1

Отредактируйте Jquery в соответствии с этим:

$(document).on('click', 'button.delete',function(){ //<-----
     var id = $(this).data('id');
     var result = confirm("Bạn có muốn xoá sinh viên này không ?");
     if(result){
          $.ajax({
               type: "POST",
               url:"delete.php",
               data: {'id':id},
               success: function(response){
                    alert("Xoá thành công");
                    document.getElementById("list").innerHTML= response;
               }
          })
     }
     return false;
});

или Вы можете сделать то же самое, но другим способом:

показать. php

...

$data .= "<td><button class='btn btn-danger delete' onclick='deleteRecord('$realid')'>Xoá</button></td>";

...

И создайте Jquery функцию:

function deleteRecord(id){
    var result = confirm("Bạn có muốn xoá sinh viên này không ?");
     if(result){
          $.ajax({
               type: "POST",
               url:"delete.php",
               data: {'id':id},
               success: function(response){
                    alert("Xoá thành công");
                    document.getElementById("list").innerHTML= response;
               }
          })
     }
}

Надеюсь, это поможет.

Answer 2

Поскольку вы добавляете элемент кнопки к данным динамически.

$(".delete").on('click',function() {
 // ..... this will not work second time.
}

Попробуйте следующее

$(document).on('click', '.delete' function(){
 // This should work.
});