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代码在页面准备就绪时运行 - 它将附加一个单击处理程序到每个dom锚点和类aboutContent - 当您加载新内容时，那些元素在页面准备就绪时不存在，所以永远不要附加一个点击处理程序。
使用.live()为您处理。或者，您可以将代码放在一个函数中，并在加载新内容时运行该函数，当它运行时，它将附加一个单击处理程序并且DOM元素将在那里，麻烦的是，你会有将元素标记为已经具有单击处理程序，或者最终将x个单击处理程序添加到某些元素。

Answer 2

可能您可以从点击处理程序返回false以防止浏览器自行执行HREF。

像，

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

否则我建议使用href =“javascript：clickhandler（''）”

在href上调用一些javascript函数

从加载的内容调用时，jQuery .load（）无效

2 个答案: