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

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)时真正加载的内容.load $('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()的URL（请参阅jQuery .load()文档页面上的“ 加载页面片段 ”）：

$('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和body标签等。

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

问题描述

3 个解决方案

解决方案1
2 2012-08-05 00:12:17

解决方案2
0 已采纳 2012-08-04 23:33:44

解决方案3
0 2012-08-05 00:15:32

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

问题描述

3 个解决方案

解决方案1 2 2012-08-05 00:12:17

解决方案2 0 已采纳 2012-08-04 23:33:44

解决方案3 0 2012-08-05 00:15:32

解决方案1
2 2012-08-05 00:12:17

解决方案2
0 已采纳 2012-08-04 23:33:44

解决方案3
0 2012-08-05 00:15:32