Xử Lí Sự Kiện Click Sau Khi Delete Thành Công Trong Ajax Trang chủ » Xóa Trong Ajax » Xử Lí Sự Kiện Click Sau Khi Delete Thành Công Trong Ajax Có thể bạn quan tâm Xoá Trong Autocad Xoa Trong Dslk Xoa Trong Mysql Xóa Trong Photoshop Xoa Trong Php Xử lí sự kiện click sau khi delete thành công trong Ajax programming ajax Phan_Vu (Phan Vũ) July 22, 2021, 2:29pm #1 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 (Gà Coder) July 22, 2021, 1:30pm #2 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. 2 Likes Phan_Vu (Phan Vũ) July 23, 2021, 1:25am #3 vậy cho mình hỏi hướng giải quyết sẽ như thế nào ạ HR16 (Gà Coder) July 23, 2021, 2:42am #4 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> 2 Likes SITUVN.gcd (SITUVNgcd) July 24, 2021, 9:18am #5 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à. 2 Likes Duy_Hoang98 (DS) July 25, 2021, 5:32am #6 Phan_Vu: $(".delete-user").on(“click”, function() {}); bạn thay thành $(document).on('click', '.delete-user', function (){}); là được. jQuery event not triggering on dynamically created element javascript, jquery, ajax asked by Raghib Ahsan on 04:23PM - 01 Sep 15 UTC 3 Likes DayNhauHoc's Discord Học C++ Free? Click Blog Dạy Nhau Học Tự Học Lập Trình 83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao? Từ khóa » Xóa Trong Ajax Bài 3 : Ajax Cơ Bản - Thêm Xóa Sửa Dữ Liệu #2 - YouTube Thêm Sửa Xóa Danh Sách Bằng JQuery Ajax - YouTube Ajax Cơ Bản - Thêm Xóa Sửa Dữ Liệu Phần 2 - WEBEXTRASITE Bài 20: Xoá Bản Ghi Sử Dụng Ajax Postback Trong MVC - TEDU Bài 20: Xoá Bản Ghi Sử Dụng Ajax Postback Trong MVC - DinhNT Sử Dụng JQuery Ajax Với Một Số Chức Năng Cơ Bản - Viblo Sử Dụng Jquery Ajax | Lê Vũ Nguyên Dạy Học Lập Trình Các Thao Tác Viết, Cập Nhật Và Xóa API Web Cổng Thông Tin Cách Xóa Khoảng Trắng Khỏi Chuỗi Trong JQuery - Morioh Bài 2 : Ajax Cơ Bản - Thêm Xóa Sửa Dữ Liệu #1 | Học Jquery Từ Cơ ... Tạo Chức Năng CRUD (Xem-Read, Thêm-Create, Sửa-Edit, Xóa ... Thêm, Sửa, Xóa Dữ Liệu Sử Dụng AJAX... - Lập Trình | Facebook Edit/Update/Delete Dữ Liệu Trong PHP & MySQL Bằng Ajax Cách Xóa Nhiều Bản Ghi Trong Bảng Dữ Liệu Bằng JQuery AJAX ...
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?