Now Reading: jQuery Dinamik Event Binding Rehberi

Loading

j

12/05/2025 / gadasi

jQuery Dinamik Event Binding Rehberi

svg41

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");
                }
            });
        }
    });
});
Loading
svg

Quick Navigation

  • 1

    jQuery Dinamik Event Binding Rehberi