我想将保存为单独 html 文件的 div 加载到“主文件”的 div 中。这很好用。但是,在我加载到主文件中的 div 中,我再次有一些链接,当我单击这些链接时,我希望将这些 div 加载到主文件中的 div 中。
所以主文件有一个像这样的菜单:
<ul id="menu_ul">
<li class=" ui-widget-header">
<a class="clickable" href="output/d1e49.html">ONE</a>
</li>
<li class=" ui-widget-header">
<a class="clickable" href="output/d1e670.html">TWO</a>
</li>
</ul>
还有一个像这样的div:
<div id="target"></div>
jquery 看起来像这样:
$("a").click(function() { return false; });
$(".clickable").click(function() {
var url = $(this).attr("href");
$('#target').load(url) + " .content";
});
加载的页面如下所示:
<div class="content">
<ul>
<li>
<a class="clickable" href="output/d1e100367.html">SUB_ONE</a>
</li>
<li>
<a class="clickable" href="output/d1e101804.html">SUB_TWO</a>
</li>
</ul>
</div>
因此页面 ONE 和 TWO 被加载到 div 中。但是,当我单击这些文件中包含的链接时,它不起作用,SUB_ONE 和 SUB_TWO 的链接会替换当前页面,而不是也加载到 div 中。
如何使加载页面中的链接正常工作? jquery 无法访问加载的 div 的 DOM 吗?
最佳答案
这是错误的语法 $('#target').load(url) + ".content";
但我猜只是有问题的拼写错误。它必须是: $('#target').load(url + ".content");
现在关于您的问题,您应该 delegate事件:
$(document).on("click", ".clickable", function (e) {
e.preventDefault();
var url = $(this).attr("href");
$('#target').load(url + " .content");
});
关于javascript - jquery:将div从其他页面加载到div中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34103777/