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（）外部内容在模式中失败

1 个答案: