Question

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

$(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的解决方案。很多人都不得不为他们的投入和道歉而不是从一开始就发布整个事情。我猜它会为每个人节省一些时间。

Answer 1

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

更好的想法是：

正确组织HTML（见下文）
使用$(...).load()加载时，只加载上面生成的部分HTML。

Ad.1。确保您在<body>标记下方有一些元素，它具有自己的ID并包含<body>标记中的所有内容。它可能看起来像这样：

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

Ad.2。加载此类内容要容易得多，因为您可以将选择器附加到传递给.load()的网址（请参阅{{3}上的“加载页面碎片” }）：

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

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

这样，附加到正文的事件（即使是这些委托的）仍然可以正常工作。

Answer 2

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

$(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

Answer 3

试试这个：

$(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和{{ 1}}标签等

.on（）不适用于动态生成的内容

3 个答案: