How to work with check-box? why my check box not be change

Question

i have a check-box and i say to it when it changed do something for me.

when i was test some days ago it worked well, but from yesterday to now it doesn't work

and i wasn't change my code, i mean when i didn't change my code how the process changed?

my jquery code that not work for me:

var tbody = '';
$.each(data, function(key, value) {
    tbody +=
        '<td><div class="form-group"><div class="checkbox checkbox-primary"><input class="checkbox" data-id="' +
    value.id +
    '" type="checkbox"><label for="checkbox1"></label></div></div></td>';
tbody += '</tr>';
});
$('tbody').append(tbody);

$(document).on('change', 'input.checkbox', function(event) {
    var data = {
        access_token: getCookie("access_token")
    }
var checkbox = event.target;
if (checkbox.checked) {
    var id = $(this).data('id');
    response = ajaxRequest(
        "http://localhost:8000/api/customers/mobile-numbers/is-default/" + id,
        "POST", data);

    if (response.status === true) {
        Swal.fire({
            title: 'موفقیت',
            icon: 'success',
            text: response.message,
            confirmButtonText: 'تایید',
            showCancelButton: false,
        }).then((result) => {
            location.reload();
        });
    } else if (response.status === 401) {
        Swal.fire({
            title: 'دسترسی غیر مجاز',
            icon: 'error',
            text: response.message,
            showConfirmButton: false,
            timer: 1500
        }).then((result) => {
            window.location = "http://localhost:7000/login";
        });
    } else {
        Swal.fire({
            title: 'خطا سمت سرور',
            icon: 'error',
            confirmButtonText: 'تایید',
            showCancelButton: false,
            showCloseButton: true
        });
    }
}
});

Answer 1

For dynamically appended checkbox, you have to use eventlistener,

Here is the code:

var checkbox = document.querySelector(".checkbox");

checkbox.addEventListener("change", (event) => {
     event.preventDefault();
     // Next Code
});