点击外部文件内链接无法将外部文件加载至Index模板的技术问题

你的问题核心在于事件绑定的时机：你一开始给页面上已存在的<a>标签绑定了点击事件，但通过load()动态加载进来的外部内容里的<a>标签是在页面初始加载之后才生成的，这些新标签并没有被绑定上你写的点击逻辑，所以点击它们不会触发内容加载。另外我注意到你的jQuery代码还有个小语法错误，最后两行的括号顺序写反了，这也可能导致整个脚本直接失效。

下面是完整的修复方案：

1. 先修正语法错误 #

把代码末尾的)};改成});——正确的闭合顺序是脚本正常运行的基础，括号写错会直接触发浏览器语法报错。

2. 改用事件委托绑定点击事件 #

将原来直接给<a>绑定事件的写法，改成事件委托模式：把事件绑定到一个始终存在的父元素（比如document或页面固定存在的容器）上，这样不管是初始页面的<a>，还是后续动态加载进来的<a>，点击时都会触发对应的处理逻辑。

修正后的完整代码：

$(window).on('load', function() { 
  $("#content").load("content/index_content.php"); 
  // 事件委托：绑定到document，覆盖所有当前及未来的<a>标签
  $(document).on('click', 'a', function(e){ 
    e.preventDefault(); 
    $("#nav div").removeClass("active"); 
    $(this).children("div").addClass("active"); 
    $('#content').load($(this).attr('href')); 
    return false; 
  }); 
});

补充优化建议 #

如果页面上有固定存在的导航容器（比如#nav本身不会被动态替换），可以把事件委托绑定到这个更接近的父元素上，性能会更优：

// 替换成更具体的父容器
$("#nav").on('click', 'a', function(e){ 
  // 原有逻辑不变
});

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