Почему мой jQuery переключатель не работает на второй странице таблицы в laravel?

Question

У меня есть та кнопка, которая изменяет значение статуса столбца в БД, но она работает только для первых 10 строк таблицы. На 2-й странице это не работает. Помоги мне, я новичок. Вот это код кнопки:

 <td><input type="checkbox" data-id="{{ $customer->id }}" name="status" class="js-switch" {{ $customer->status == 1 ? 'checked' : '' }}></td>
            <td>

это jquery

let elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
elems.forEach(function(html) {
    let switchery = new Switchery(html,  { size: 'small' });
});
$(document).ready(function(){
    $('.js-switch').change(function () {
        let status = $(this).prop('checked') === true ? 1 : 0;
        let userId = $(this).data('id');
        $.ajax({
            type: "GET",
            dataType: "json",
            url: '{{ route('users.update.status') }}',
            data: {'status': status, 'user_id': userId},
            success: function (data) {
            console.log(data.message);
            }
        });
    });
});

Answer 1

попробуйте использовать метод .on () , таким образом он добавит прослушиватель событий и для вновь добавленных элементов:

let elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
elems.forEach(function(html) {
    let switchery = new Switchery(html,  { size: 'small' });
});
$(document).ready(function(){
    $('.js-switch').on('change',function () {
        let status = $(this).prop('checked') === true ? 1 : 0;
        let userId = $(this).data('id');
        $.ajax({
            type: "GET",
            dataType: "json",
            url: '{{ route('users.update.status') }}',
            data: {'status': status, 'user_id': userId},
            success: function (data) {
            console.log(data.message);
            }
        });
    });
});