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

【问题标题】：jquery .load() external content failed in modaljquery .load() 外部内容在模态中失败
【发布时间】：2018-08-28 09:24:54
【问题描述】：

我尝试通过 .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 代码在第一个模态中呈现良好。

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

【问题讨论】：

不要使用重复的 ID ...如果使用重复的 ID，JS 总是执行第一个 DOM 或不执行或抛出错误...在您的代码中，每当您单击第二个模式链接时，它都会执行第一个标签...
@Karthik 确实！我错过了。非常感谢。

标签： javascript jquery load bootstrap-modal

【解决方案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 加载的数据的 ID 位于原始 html DOM 或 index.html 中，并且您不能拥有包含两个具有相同 ID 的元素的页面，否则它将不能正常工作。

【讨论】：