Question

我实际上是为仓库的库存商开发一个django应用程序。我正在尝试在列表按钮中获取每个仓库的库存商列表。此按钮显示一个模式，该模式通过ajax进行查询，查询分配给特定仓库的所有库存商的名称，位置和权限。我想在模态中显示来自引导程序的切换按钮，并刷新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

要获取的元素是动态的，因此您需要引用页面上已经存在的内容，请尝试以下操作：

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

引导程序切换不起作用

1 个答案: