javascript - 从加载的内容调用时 jQuery .load() 不工作

Question

我的主要导航 [我们的客户、我们的文化、我们的人民] 使用 .load() 来提取内容并将其显示在同一页面上的 div 中，无需刷新。

我希望新内容中的链接也能这样做，只显示同一 div 中引用的任何内容。但是，当他们被点击时，它会直接进入新页面。

$(function(){
    $("a.aboutContent").click(function (e) {
        e.preventDefault();
        $("#aboutContainer").load($(this).attr("href"));
    });
});

所以，当<a href="ourpeople.htm" class="aboutContent">Our People</a>单击后，它会将 ourpeople.htm 拉入 #aboutContainer div。如果您单击 ourpeople.htm 中的链接，我只想让该内容显示在同一个 #aboutContainer div 中。我也将 aboutContent 类分配给子页面中的链接，但它仍然无法正常工作。

Answer 1

您将需要使用 .live()监听来自所有内容的点击，包括新的 DOM 元素:

$(function(){
    $("a.aboutContent").live('click', function (e) {
         e.preventDefault();
         $("#aboutContainer").load($(this).attr("href"));
     }); 
});

这样做的原因是，jQuery 代码在页面准备就绪时运行 - 它会使用类 aboutContent 将点击处理程序附加到每个 dom anchor - 当您加载新内容时，页面准备好时不存在的那些元素，因此永远不要将点击处理程序附加到它们。
使用.live()为你处理。或者，您可以将代码放在一个函数中，并在加载新内容时运行该函数，这样当它运行时，它将附加一个点击处理程序并且 DOM 元素将在那里，问题是，您会将元素标记为已经具有点击处理程序，否则您最终会向某些元素添加 x 个点击处理程序。