jquery .load() 外部内容在模态中失败

Question

我尝试通过 .load() jquery 函数加载 html 的外部块，但它无法在模式弹出窗口中正确呈现（注意：与 .get() 相同的问题)

代码是：

 $('#butt2').on('click', function() {
    $('#mbodyko').load('nav.html', function() {
        $('#myModalnok').modal({show: true });
      });
    });

渲染不好，问题出在这里：

http://plnkr.co/edit/z9oQPVG2F9oYaJCzovN5?p=preview

您会注意到第二个模态中的选项卡不可点击，而相同的 html 代码在第一个模态中呈现良好。

你知道为什么吗？感谢您的提示！

Answer 1

我所做的就是删除第一个模态html，就像这样：

<html dir="ltr" lang="en-US">
<head>
<link rel="stylesheet" 
href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
</head>
<body>
<hr>
<button class="btn btn-primary btn-lg" id="butt1">modal OK</button>
<br />
<br />
<button class="btn btn-primary btn-lg" id="butt2">modal NOK - use jquery .load</button>

 <div class="modal fade" id="myModalnok" tabindex="-1" role="dialog" aria-hidden="true">
   <div class="modal-dialog">
     <div class="modal-body">
       <div class="modal-content">
         <div class="modal-header">
           <h4 class="modal-title" id="myModalLabel">Problem: click does not change the tabs!</h4>
         </div>
         <div class="modal-body" id="mbodyko">
         </div>
       </div>
     </div>
   </div>
 </div>

 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
 <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>
  <script>
      $('#butt1').on('click', function() {
        $('#myModalok').modal({
          show: true
        });
    });

    $('#butt2').on('click', function() {
      $('#mbodyko').load('nav.html', function() {
        $('#myModalnok').modal({
          show: true
        });
      });
    });
</script>
</body>
</html>

我认为问题在于从 nav.html 加载的数据具有原始 html DOM 或 index.html 中的 ID，而您不能包含两个 ID 相同的元素的页面，否则将无法正常工作。

jquery .load() 外部内容在模态中失败

jquery .load() external content failed in modal

javascript

jquery

load

bootstrap-modal