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

.on() not working for dynamically generated content

本文关键字：动态 不适用 适用于 on      更新时间：2023-09-26

我会尽可能清楚地解释我想做什么，希望人们能够理解这个问题。

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

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

这是第一次，但当通过.load（）生成新内容时，div停止响应。我是JS的新手，所以如果答案很明显，我会提前道歉。我一直在尝试自己寻找解决方案，但我找到的所有东西都告诉我.on（）应该适用于动态生成的内容。

编辑：无法模拟这个问题，所以我发布了一个包含整个索引页面的粘贴框，希望它能澄清这个问题。

http://pastebin.com/xT5syd9j

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

这里的问题可能是您在调用$('body').load(href)时实际加载的内容。如果加载整个页面的HTML（包括<html>和<body>标记），则可能会出现问题。您的浏览器通过从不正确的HTML（在您的情况下类似于<html><body><html><body>...</body></html></body></html>）中使用某些内容来解决这些问题，这可能会产生意外的结果。

更好的想法是：

  1. 正确组织HTML（见下文）
  2. 使用$(...).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>内容。

通过这种方式，附加到主体的事件（即使是这些委派的事件）应该仍然可以正常工作。

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

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

试试这个：

$(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标记等。

相关文章：