jQuery Dinamik Event Binding Rehberi
1. Sorun
$('.delete-blog').click(function () {...})
sadece sayfa yüklendiğinde var olan elementlere çalışır.
DataTable gibi sonradan gelen öğelerde bu çalışmaz.
2. Çözüm
Delegated event binding kullanın:
$(document).on('click', '.delete-blog', function () {
// işlem
});
3. Uygulama Örneği
SweetAlert ve AJAX kullanarak silme işlemi yapabilirsiniz. Silme işlemi başarılı olursa, satır DataTable’dan da kaldırılır.
$(document).on('click', '.delete-blog', function () {
const id = $(this).data('text');
const row = $(this).parents('tr');
Swal.fire({
title: "Are you sure?",
text: "This will delete the record permanently.",
icon: "warning",
showCancelButton: true,
confirmButtonText: "Yes, delete it!",
cancelButtonText: "Cancel"
}).then(function (result) {
if (result.isConfirmed) {
$.ajax({
url: "/delete-url/" + id,
type: "DELETE",
headers: {
'X-CSRF-TOKEN': 'your_token_here'
},
success: function () {
Swal.fire("Deleted!", "Record has been deleted.", "success");
dt_basic.row(row).remove().draw();
},
error: function () {
Swal.fire("Error!", "Could not delete record.", "error");
}
});
}
});
});