javascript - jquery:将div从其他页面加载到div中

Question

我想将保存为单独 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 吗？

Answer 1

这是错误的语法 $('#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");

});