jQuery load加载外部页面div时动态内容未生效的问题

你碰到的这个情况，核心是jQuery load() 方法的一个特性：当你用 load("another_page.html #main") 这种带选择器的方式加载页面片段时，jQuery并不会执行该片段内部（或者原页面中）的脚本。

具体的执行流程是这样的：

1. jQuery 请求到 another_page.html 的完整HTML内容
2. 把所有内容放到一个临时的隐藏DOM节点里
3. 从临时节点中只提取匹配 #main 的元素，插入到你的 #content 容器中
4. 临时节点直接被丢弃，其中包含的 <script> 标签根本没机会被浏览器执行，所以 $('#main').text('main should change') 这段代码完全没运行，自然显示的还是初始的"loading"

方案一：移除load的选择器，加载完整页面后再提取目标内容 #

这种方式会让原页面的脚本正常执行，之后我们再把不需要的内容去掉：

$("#content").load("another_page.html", function() {
  // 加载完成后，提取#main并替换content的内容
  const $main = $("#content #main").detach();
  $("#content").empty().append($main);
});

方案二：把脚本逻辑移到load的回调函数中 #

如果脚本逻辑不依赖another_page.html的环境，直接在加载完成后执行逻辑是最简洁的：

$("#content").load("another_page.html #main", function() {
  // 片段加载完成后，直接修改文本
  $('#main').text('main should change');
});

这样既保留了只加载目标片段的高效性，又能实现预期的文本修改效果。

方案三：手动解析HTML并执行脚本（适合必须保留原页面脚本的场景） #

如果一定要保留another_page.html里的脚本，还可以通过$.get手动处理返回的内容，提取脚本并执行：

$.get("another_page.html", function(html) {
  // 创建临时容器存放返回的HTML
  const $tempContainer = $('<div>').html(html);
  // 提取目标#main元素
  const $mainContent = $tempContainer.find('#main');
  // 提取所有script标签并执行
  $tempContainer.find('script').each(function() {
    eval($(this).text());
  });
  // 将#main插入到目标容器中
  $("#content").empty().append($mainContent);
});

⚠️ 注意：这种方式用到了eval，如果another_page.html的内容不可信，会有安全风险，仅在内容可控的场景下使用。

内容的提问来源于stack exchange，提问作者Seybanks