我将尝试尽可能清楚地解释我正在尝试做的事情，希望人们能够理解这个问题。
$(document).ready(function() {
$('body').on('click', '.mainNav', function() {
var href = $(this).attr('href');
$('body').load(href);
});
});
这是一段给我带来麻烦的代码。基本上，它应该做的就是从 div 中获取“href”属性，然后加载它以替换 body 标记的当前内容。
这第一次有效，但是当通过 .load() 生成新内容时，div 停止响应。我对 JS 还很陌生，所以如果答案是显而易见的，我提前道歉。我一直在尝试自己寻找解决方案，但我发现的所有内容都告诉我 .on() 应该适用于动态生成的内容。
编辑:无法在 fiddle 中模拟问题，因此我发布了带有整个索引页的pastebin，希望能澄清问题。
编辑:它使用adeneo的解决方案工作。非常感谢大家的意见，并对没有从一开始就发布整个内容表示歉意。我猜这会节省每个人一些时间。
最佳答案
这里的问题可能是您调用$('body').load(href)时真正加载的内容。 。如果你加载整个页面的HTML(包括<html>和<body>标签)，那么你可能会遇到问题。您的浏览器通过从不正确的 HTML 中提供可用的内容(在您的情况下类似于 <html><body><html><body>...</body></html></body></html> )来解决此类问题 - 这可能会产生意外的结果。
更好的想法是:
- 正确组织 HTML(见下文)
- 当您使用
$(...).load()加载时，仅加载上面生成的 HTML 的一部分.
广告1。确保 <body> 下面有一些元素标签，它有自己的 ID，包含位于 <body> 中的所有内容。标签。它可能看起来像这样:
<html>
...
<body>
<div id="main_div">
<!-- all elements here -->
</div>
</body>
</html>
广告2。加载此类内容要容易得多，因为您可以附加选择器到传递给 .load() 的 URL。 (请参阅 jQuery .load() docs page 上的“加载页面片段”):
$('body').load(href + ' #main_div');
这样您将检索整个页面，但仅获取 ID 为“#main_div ”的元素并替换整个 <body>对此感到满意。
这样附加到正文的事件(即使是这些委托(delegate)的事件)应该仍然可以正常工作。
关于javascript - .on() 不适用于动态生成的内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11812790/