Javascript jquery.load（）外部内容在模式中失败_Javascript_Jquery_Load_Bootstrap Modal

Javascript jquery.load（）外部内容在模式中失败

javascript jquery

Javascript jquery.load（）外部内容在模式中失败,javascript,jquery,load,bootstrap-modal,Javascript,Jquery,Load,Bootstrap Modal,我试图通过.load（）jquery函数加载一个外部html块，但它无法在模式弹出窗口中正确呈现（注意：与.get（）的问题相同）代码是： $('#butt2').on('click', function() { $('#mbodyko').load('nav.html', function() { $('#myModalnok').modal({show: true }); }); }); 渲染不好，问题是：您可以注意到，第二个模式中的选项

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

代码是：

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

渲染不好，问题是：

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

你知道为什么吗？

谢谢你的提示

我所做的就是删除第一个模式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>



模态OK




模态NOK-使用jquery.load
问题：单击不会更改选项卡！
$（'#butt1'）。在（'click'，function（）上{
$（'myModalok'）。模态({
秀：真的
});
});
$（'#butt2'）。在（'click'，function（）上{
$（'#mbodyko'）.load（'nav.html'，function（）{
$（'myModalnok'）。模态({
秀：真的
});
});
});

我认为问题在于，从

nav.html

加载的数据具有原始html DOM或

index.html

中的ID，并且您不能拥有具有相同ID的两个元素的页面，否则它将无法正常工作。

不要使用重复ID。。。JS始终执行第一个DOM，如果使用重复ID，则不执行或抛出错误。。。在你的代码中，每当你点击第二个模态链接，它就会执行第一个模态链接上的标签…@Karthik！我错过了。谢谢。