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中。

如何让加载页面中的链接生效？加载的div的DOM是否无法被jquery访问？

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");

});

jquery：将div从其他页面加载到div中

1 个答案: