我尝试通过 .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 代码在第一个模态中呈现良好。
你知道为什么吗？ 感谢您的提示！
我所做的只是删除第一个模态 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中的ID或index.html，并且您不能拥有具有两个具有相同ID的元素的页面，否则将无法正常工作。