使用jQuery .load加载的外部HTML中按钮及脚本无法正常运行

我明白你遇到的问题了——用load()加载外部HTML的指定div时，外部文件里的脚本没触发，而且加载进来的按钮也没法正常工作对吧？这其实是jQuery load()方法的特性导致的，我来给你拆解原因和解决方案：

为什么外部脚本不执行？ #

当你用load('external.html #external-id-of-div')这种带选择器的写法时，jQuery的处理逻辑是：先加载整个外部HTML页面，然后提取出匹配选择器的元素，但这个过程中会自动剥离掉所有<script>标签，所以外部文件里的alert("comments")根本不会被执行。

解决方案一：在load回调里执行脚本+绑定动态元素事件 #

这是最推荐的方式，把需要执行的脚本和动态元素的事件绑定放在load()的回调函数里，确保DOM加载完成后再执行：

$('#button').on('click', function () {
  $('#container').css({'display': 'block'});
  $('#container').load('external.html #external-id-of-div', function() {
    // 这里执行原来外部文件里的脚本逻辑
    alert("comments");
    
    // 给加载进来的按钮绑定事件
    $('#external-button').on('click', function() {
      // 这里写按钮的点击逻辑
      console.log("外部按钮被点击了");
    });
  });
});

解决方案二：用事件委托处理动态按钮 #

如果你的外部HTML里有多个动态按钮，或者不想每次加载都手动绑定，用事件委托更高效——把事件绑定到已经存在的父容器（比如#container）上，监听子元素的点击：

// 主页面里提前绑定事件委托
$('#container').on('click', '#external-button', function() {
  // 按钮点击逻辑
  alert("外部按钮生效了！");
});

// 加载外部HTML的代码不变
$('#button').on('click', function () {
  $('#container').css({'display': 'block'});
  $('#container').load('external.html #external-id-of-div');
});

这种方式不管外部HTML什么时候加载，只要按钮出现在#container里，点击事件都会触发。

额外提示：如果必须保留外部脚本 #

如果你一定要把脚本留在外部HTML文件里，那不要用选择器过滤，直接加载整个外部页面（load('external.html')），这样脚本会被执行，但缺点是会加载外部页面的所有内容（包括不需要的部分）。更合理的做法还是把脚本逻辑移到主页面的回调里，保持代码的可维护性。

内容的提问来源于stack exchange，提问作者SNM-77