Bootstrap переключатель не является функцией

Question

На самом деле разрабатываю django приложение для складов склада. Я пытаюсь получить список склада на склад в кнопке списка. Эта кнопка показывает модальный режим, который делает запрос по запросу ajax с именем, положением и разрешениями всех складов, назначенных конкретному c складу. Я хочу показать кнопку переключения с bootstrap в моем модале, и я переосмыслил sh функцию bootstrapToggle, и она показывает следующее сообщение Uncaught TypeError: $(...).bootstrapToggle is not a function

На самом деле весь код javascript такой:

var token = '{{csrf_token}}';
$('#Modal_list').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget); // Button that triggered the modal
    var urlToAjax = button.data('urlstockists');
    console.log(urlToAjax);
    var recipient = button.data('pk'); // Extract info from data-* attributes
    console.log(recipient);                
        $.ajax({
            headers: { "X-CSRFToken": token },
            url: urlToAjax,
            type: 'POST',
            data: {'id':recipient},
            success: function(data){
                console.log(data)
                var htmldata=""
                if(data.length==0){
                    htmldata += '<div class="h5 mb-0 font-weight-bold text-gray-800"> There are no assigned stockists </div>'
                }else{
                    for(var i = 0; i<data.length; i++){
                        htmldata += '<div class="card border-left-primary shadow h-100 py-2">\
                                        <div class="card-body">\
                                            <div class="row no-gutters align-items-center">\
                                                <div class="col mr-2">\
                                                    <div class="h5 mb-0 font-weight-bold text-gray-800">Name: '+data[i].fields.name+'</div>\
                                                    <div class="h5 mb-0 font-weight-bold text-gray-800">Position: '+data[i].fields.position+ '</div>\
                                                    <div class="form-group">\
                                                        <label> Grant input\
                                                            <input type="checkbox" class="newToggle" data-toggle="toggle" data-on="On" data-off="Off" data-onstyle="warning">\
                                                        </label>\
                                                        <label> Grant output\
                                                            <input type="checkbox" data-toggle="toggle" data-on="On" data-off="Off" data-onstyle="warning">\
                                                        </label>\
                                                    </div>\
                                                </div>\
                                                <div class="col-auto">\
                                                    <i class="fas fa-user fa-2x text-gray-300"></i>\
                                                </div>\
                                            </div>\
                                        </div>\
                                    </div> <br>';
                    }     
                }
                $('#stck').html(htmldata);
                $('.newToggle').bootstrapToggle();
            }
        });
    var modal = $(this);
    modal.find('.modal-body #stock').val(recipient)
});

Answer 1

Этот элемент, который вы захватываете, является Dynami c, поэтому вам нужно сослаться на то, что уже существовало на странице, попробуйте это:

$('body .newToggle').bootstrapToggle();