Question

刚开始，请耐心等待我：）

我在这个网站上搜索了答案，但找不到符合我问题的答案。

我正在尝试使用jQuery ajax表单插件打开一个bootstrap模式并获取一些内容。它工作，内容显示在模态中，但是，当我关闭模态并再次打开它时，屏幕会闪烁并变为灰色（背景打开），然后它会返回。

如果我重新加载网站并重试，它会一直有效，直到我再次尝试打开相同的模式。但是，如果我跳过将内容加载到模态，它会根据我的需要多次打开/关闭。所以我认为它与再次打开时的旧内容有关。有时内容会发生变化，所以我需要从模态div中删除旧内容，但我似乎无法让它工作。

标准模态div：

<link rel="stylesheet" href="css/bootstrap-custom.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>

<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">

  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="btn btn-default" data-dismiss="modal">Lukk</button>
    </div>
    <div class="modal-body">
        <div class="something" style="display:none;">
        </div>          
    </div>
  </div>
</div>

按钮用于打开模态：

<button type="button" class="btn btn-primary push" id="1" data-toggle="modal" data-target="#myModal">Button</button>

最后，用内容填充模态的脚本：

$(document).ready(function(){
   $('.push').click(function(){
      var id = $(this).attr('id');
      $.ajax({
         type : 'post',
         url : 'target.php', 
         data :  {'id': id}, 

         success : function(r)
        {     
          //show modal
          $('#myModal').modal('show') 
          $('.something').show().html(r); //Show the content in the modal div            

       } //Success push
    });//.ajax

}); //push

   //Trying to close modal and delete content
   $("#myModal").on('hidden.bs.modal', function () {
      $('#myModal').removeData('bs.modal')
      $(this).data('bs.modal', null);
    }); //myModal hidden

});//document ready

如前所述，这个工作一次。但是在关闭模态并再次打开它失败了。

Answer 1

我想我在几个（！）小时后想出来，结果证明是一个新手的错误。如果其他人有同样的问题，请在此处发布。

结果是ajax-post返回的HTML还包含所有脚本源：

<link rel="stylesheet" href="css/bootstrap-custom.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>

所以这造成了问题。当从“target.php”中删除它们时，它似乎工作得很好:)

内容无法打开的引导模式

1 个答案: