0

我会尽可能清楚地解释我正在尝试做的事情，并希望人们能够理解这个问题。

$(document).ready(function() {
  $('body').on('click', '.mainNav', function() {
    var href = $(this).attr('href');
    $('body').load(href);
   });
});

这是给我带来麻烦的代码。基本上，它应该做的是从 div 中获取 'href' 属性，然后加载该属性以替换 body 标记的当前内容。

这是第一次工作，但是当通过 .load() 生成新内容时，div 停止响应。我对 JS 很陌生，所以如果答案很明显，我提前道歉。我一直在尝试自己寻找解决方案，但我发现的一切都告诉我 .on() 应该适用于动态生成的内容。

编辑：无法在小提琴中模拟问题，所以我发布了一个包含整个索引页面的 pastebin，希望它能澄清问题。

http://pastebin.com/xT5syd9j

编辑：它使用 adeneo 的解决方案。非常感谢每个人的意见，并为没有从一开始就发布整个内容而道歉。我猜它会为每个人节省一些时间。

4

3 回答 3

2

这里的问题可能是你调用$('body').load(href). 如果你加载整个页面的 HTML（包括<html>和<body>标签），那么你可能会遇到问题。您的浏览器通过使用不正确的 HTML（在您的情况下类似于<html><body><html><body>...</body></html></body></html>）来处理此类问题 - 这可能会产生意想不到的结果。

更好的主意是：

  1. 正确组织 HTML（见下文）
  2. 仅加载上面生成的 HTML 的一部分，当您使用$(...).load().

广告1。确保您在标签下方有一些元素<body>，它有自己的 ID 并包含将位于<body>标签中的所有内容。它可能看起来像这样：

<html>
...
<body>
    <div id="main_div">
    <!-- all elements here -->
    </div>
</body>
</html>

广告 2。加载此类内容要容易得多，因为您可以将选择器附加到传递给的 URL .load()（请参阅jQuery文档页面上的“加载页面片段” ）：.load()

$('body').load(href + ' #main_div');

这样您将检索整个页面，但只获取 ID 为 " #main_div" 的元素并用它替换整个<body>内容。

这样，附加到主体的事件（即使是这些委托）仍应正常工作。

于 2012-08-05T00:12:17.090 回答
0

尝试这个：

$(document).ready(function(){
    $('body').on('click', '.mainNav', function() {
        var href = $(this).attr('href');
        $('body').load(href + " body > *");
    });
});

我们在这里所做的只是加载页面上的 body 元素的内容（href）。无需向该页面添加更多元素。只需像 Tradeck 提到的那样选择正文的内容。

问题显然是，如果页面href是一个完整的 HTML 页面，你正在加载一个 DOCTYPE、第二个html标签、第二个head标签body等。

于 2012-08-05T00:15:32.063 回答
0

不太确定它是什么问题，但我猜它与加载到与处理程序连接的相同元素有关，所以尝试：

$(document).ready(function() {
    $(document).on('click', '.mainNav', function(e) {
        e.preventDefault();
        console.log('I just clicked : '+e.target.href);
        $('body').load(e.target.href);
    });
});

此外，您当然知道这将替换您页面上的所有内容，除非在加载的内容中存在具有相同类的新元素，否则不会发生任何事情。我建议也使用容器将内容加载到其中。当然，链接必须指向服务器上的实际文件。

还要确保您加载的文件没有另一组<head>,<body>标签等，因为这会给您带来麻烦，仅限 HTML 内容！

编辑：

如果.mainNav是一种<a href="link_you_are_trying_to_load"></a>元素，您还必须阻止默认操作，请参阅更新的代码。

新编辑：

您遇到的问题非常明显，您正在使用以下元素：

<div class="mainNav" href="test.php" id="active">

div 元素没有属性 href，因此 JS 不会获取该值，因为它不是<a>元素以外的任何东西的有效属性

您可以将元素更改为<a>元素或将 href 属性更改为：

<div class="mainNav" data-href="test.php" id="active">

并做：

var href = $(this).data('href');

至少那将是有效的 HTML！

此外，您似乎有一个类似“容器”的元素#site，所以您为什么不这样做：

$('#site').load(href); //using the data-href as above
于 2012-08-04T23:33:44.333 回答