javascript - 未捕获的 TypeError : $(. ..).load(...).modal 不是关闭后重新打开 modalbox 的函数

Question

Uncaught TypeError: $(...).load(...).modal is not a function

当我关闭模式并尝试再次重新打开模式框时，我可以在控制台中看到此错误。有时它工作 2-3 次然后出现此错误。

有人可以告诉我可能是什么问题吗？

我在页面上添加了一个 div

<div class="modal fade" id="loadmodalbox" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true"></div>

这是打开模式的链接

<button class="btn btn-default openmodal" modalbox="affiliateprogrammodal" data-toggle="modal" data-target="#affiliateprogrammodal" bid="'.$company['User']['u_id'].'">'.$company['User']['u_text_for_blue_button'].'</button>

然后我使用以下代码加载不同的模态:

$('.openmodal').click(function(e){ 
e.preventDefault();
var modalbox = $(this).attr('modalbox'); 
var companyid = '';
if(modalbox=='commentmodal') {
    companyid = $(this).attr('companyid');
    companyid = '/'+companyid;
}
if(modalbox=='affiliateprogrammodal') {
    companyid = $(this).attr('bid');
    companyid = '/'+companyid;
}
$('#loadmodalbox').load('<?php echo Router::url(array('controller'=>'users','action'=>'loadmodalbox')); ?>/'+modalbox+companyid).modal({
                              keyboard: false,
                              show:true,
                              backdrop:'static'
                            });
});

Answer 1

您可以添加您的 HTML 页面和 JS 文件吗？据我们所知，这可能是页面尚未加载的问题。如果您的模态框正在显示，但没有内容，就会出现这种情况。

在这种情况下，请尝试像这样在加载回调中调用 .modal() 方法。

$('.openmodal').click(function(e){ 
    e.preventDefault();

    var modalbox = $(this).data('modalbox'); 
    var companyid = '';
    
    if(modalbox=='commentmodal') {
        companyid = "/" + $(this).data('companyid');
    }
    
    if(modalbox=='affiliateprogrammodal') {
        companyid = "/" + $(this).data('bid');
    }

    var url = '<?php echo Router::url(array('controller'=>'users','action'=>'loadmodalbox')); ?>/' + modalbox + companyid;
    $('#loadmodalbox').load(url, function(){
        $(this).modal({
          keyboard: false,
          show: true,
          backdrop: 'static'
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="modal fade" id="loadmodalbox" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true"></div>

<button class="btn btn-default openmodal" data-modalbox="affiliateprogrammodal" data-toggle="modal" data-target="#affiliateprogrammodal" data-bid="'.$company['User']['u_id'].'">'.$company['User']['u_text_for_blue_button'].'</button>