Xử lí sự kiện click sau khi delete thành công trong Ajax

Phan_Vu · July 22, 2021, 2:29pm

Mình có đoạn code dưới đây với chức năng delete, thì khi xoá thành công thì mình sẽ call lại hàm fetchData() cho table load lại data thì sau khi xoá xong thì sự kiện click nút xoá của mình không hoạt động nữa. Mọi người cho mình hỏi fix cái này như nào vậy nhỉ?

(Code có thể lấy về máy để chạy bình thường)

<!doctype html>
<html lang="vi">
  <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>
    <div class="container">
        <div class="mt-5">
            <div class="form-group">
                <label>Full name</label>
                <input type="text" class="form-control fullName" placeholder="Full name">
            </div>
            <div class="form-group">
                <label>Email</label>
                <input type="text" class="form-control email" placeholder="Email">
            </div>
            <div class="form-group">
                <label>Password</label>
                <input type="text" class="form-control password" placeholder="Password">
            </div>
            <button id="add-user" class="btn btn-primary">Add</button>
        </div>
        <div class="row mt-5">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>ON</th>
                        <th>Full name</th>
                        <th>Email</th>
                    </tr>
                </thead>
                <tbody id="data-user"></tbody>
            </table>
        </div>
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script>
        $(function(){
            function fetchData(){
                $.ajax({
                    url: "https://60f7c0709cdca00017454f99.mockapi.io/api/v1/user",
                    method: "GET",
                    dataType: "JSON",
                    async: false,
                    success: function(response){
                        var html = "";
                        $.each(response, function(key, value){
                            var index = key+1;
                            var id = value.id;
                            var fullName = value.fullName;
                            var email = value.email;
                            html += '<tr>'
                                 + '    <td scope="row">'+index+'</td>'
                                 + '    <td>'+fullName+'</td>'
                                 + '    <td>'+email+'</td>'
                                 + '    <td><button data-id="'+id+'" class="form-control delete-user">Delete</button></td>'
                                 + ' <tr>';
                        })
                        $("#data-user").html(html)
                    },
                    error: function(error){
                        console.error();
                    }
                })
            }
            fetchData();
            $("#add-user").on("click", function() {
                var fullName = $(".fullName").val();
                var email = $(".email").val();
                var password = $(".password").val();
                var createAt = $.now();
                var updateAt = $.now();
                var createBy = Math.random();
                $.ajax({
                    url: "https://60f7c0709cdca00017454f99.mockapi.io/api/v1/user",
                    method: "POST",
                    data: {
                        fullName: fullName,
                        email: email,
                        password: password,
                        createAt: createAt,
                        updateAt: updateAt,
                        createBy: createBy,
                    },
                    dataType: "JSON",
                    async: false,
                    success: function(response) {
                        alert("Insert successfully");
                        fetchData();
                    },
                    error: function(error){
                        console.error();
                    }
                })
            })
            $(".delete-user").on("click", function() {
                var id = $(this).attr("data-id");
                $.ajax({
                    url: "https://60f7c0709cdca00017454f99.mockapi.io/api/v1/user/"+id,
                    method: "DELETE",
                    dataType: "JSON",
                    async: false,
                    success: function(response) {
                        alert("Delete successfully");
                        fetchData();
                    },
                    error: function(error){
                        console.error();
                    }
                })
            })
        })
    </script>
  </body>
</html>

HR16 · July 22, 2021, 1:30pm

Vấn đề là khi dùng:

$("#data-user").html(html)

thì nút xóa cũ đã được gán event click bị thay thành nút xóa mới chưa được gán.

Phan_Vu · July 23, 2021, 1:25am

vậy cho mình hỏi hướng giải quyết sẽ như thế nào ạ

HR16 · July 23, 2021, 2:42am

Thay bằng cái mới thì phải gán cho cái mới thôi . Có 2 cách:

Chạy lại đoạn này:

$(".delete-user").on("click", function() {
                var id = $(this).attr("data-id");
                $.ajax({
                    url: "https://60f7c0709cdca00017454f99.mockapi.io/api/v1/user/"+id,
                    method: "DELETE",
                    dataType: "JSON",
                    async: false,
                    success: function(response) {
                        alert("Delete successfully");
                        fetchData();
                    },
                    error: function(error){
                        console.error();
                    }
                })
            })

Dùng property onclick của thẻ.

JS:

function deleteData(){
var id = $(this).attr("data-id");
                $.ajax({
                    url: "https://60f7c0709cdca00017454f99.mockapi.io/api/v1/user/"+id,
                    method: "DELETE",
                    dataType: "JSON",
                    async: false,
                    success: function(response) {
                        alert("Delete successfully");
                        fetchData();
                    },
                    error: function(error){
                        console.error();
                    }
                })
}

HTML:

<td><button data-id="123" class="form-control delete-user" onclick="deleteData()">Delete</button></td>

SITUVN.gcd · July 24, 2021, 9:18am

2 nhóm sự kiện add và delete bạn nên để trong fetchData ngay sau dòng $("#data-user").html(html); để mỗi lần dữ liệu tải lại là sự kiện được gắn vào dữ liệu mới.

À, hình như #add-user nằm độc lập mà.

Duy_Hoang98 · July 25, 2021, 5:32am

bạn thay thành

$(document).on('click', '.delete-user', function (){});

là được.