使用jQuery Load方法加载子页面时主页面与子页面外部脚本冲突问题

你的问题核心在于动态加载的子页面无法复用主页面已加载的jQuery/Bootstrap，且重复加载会导致全局脚本冲突，下面是具体的解决步骤：

1. 绝对不要重复加载jQuery和Bootstrap #

主页面已经在全局作用域加载了jQuery和Bootstrap，这些库的对象（$、jQuery、Bootstrap的组件）是全局可用的。重复加载会覆盖原有的实例，导致Bootstrap组件（比如动画、交互）重复初始化，出现异常动画或事件冲突。

所以子页面里不要加任何jQuery/Bootstrap的script标签，也不要用$.getScript()重新加载它们。

2. 按需加载子页面专属插件（或提前全局加载） #

你的子页面用到了jquery-countto插件，这个插件只需要加载一次。有两种方案：

方案A：提前在主页面加载所有常用插件 #

如果你的多个子页面都会用到这类插件，直接在主页面的脚本区末尾添加插件引用，一次性加载完成：

<!-- 放在主页面的现有脚本之后 -->
<script src="plugins/jquery-countto/jquery.countTo.js"></script>

方案B：按需加载（仅当子页面被访问时加载） #

如果插件只用在少数子页面，可以在setPage函数中判断插件是否已加载，避免重复请求：

// 全局标记插件是否已加载
let countToPluginLoaded = false;

function setPage(page) {
  $.ajax({
    url: page,
  }).done(function (data) {
    $("#main-content").html(data);
    // 初始化子页面的插件
    initDynamicContentPlugins();
  });
}

function initDynamicContentPlugins() {
  // 初始化count-to插件
  if (!countToPluginLoaded) {
    $.getScript("plugins/jquery-countto/jquery.countTo.js", function() {
      countToPluginLoaded = true;
      // 插件加载完成后，初始化动态内容中的count-to元素
      $(".count-to").countTo();
    });
  } else {
    // 插件已加载，直接初始化
    $(".count-to").countTo();
  }

  // 如果子页面还有其他Bootstrap组件（比如bootstrap-select的下拉框），也要手动刷新初始化
  // $(".bootstrap-select").selectpicker("refresh");
}

3. 关键：手动初始化动态插入的插件 #

浏览器只会在页面首次加载时执行DOM就绪事件（$(document).ready()），动态加载的HTML内容不会自动触发插件的初始化逻辑。所以在把HTML插入主内容区后，必须手动调用插件的初始化方法，比如上面的$(".count-to").countTo()。

额外注意：事件委托处理动态元素 #

如果子页面中有需要绑定点击/交互事件的元素，不要直接用$(".btn").click()这种方式绑定，而是用jQuery的事件委托，确保动态添加的元素能触发事件：

// 主页面中提前绑定事件委托，监听主内容区内的按钮点击
$("#main-content").on("click", ".your-button-class", function() {
  // 你的事件逻辑
});

按照这个方案修改后，既能复用主页面的核心脚本，避免冲突，又能让子页面的插件正常工作。

内容的提问来源于stack exchange，提问作者Nguyễn Long