如何让动态加载文件中的<a>标签执行指定JS逻辑而非页面重载？

你遇到的这个问题其实很典型：初始页面里的能正常触发无刷新逻辑，但动态加载进来的就直接跳转了，核心原因是事件绑定的时机不对。

原来的代码是在页面加载完成后，直接给当时已经存在的元素绑定了click事件。但通过load()方法动态插入的（比如files/1.html里的那个链接），是在初始页面渲染之后才生成的，这些新元素根本没机会被绑定上事件，所以点击时就会触发浏览器默认的跳转行为。

解决方案：使用事件委托 #

修改assets/URL.js里的代码，换成事件委托的写法，把事件绑定到一个已经存在的父元素上，利用事件冒泡来处理动态元素的事件：

$(function(){
  // 将事件委托到#MyDiv这个已存在的容器上，监听内部所有<a>的点击
  $("#MyDiv").on("click", "a", function (event) {
    event.preventDefault();
    var TheURL = $(this).attr('href');
    if(TheURL){
      $("#MyDiv").load(TheURL , { name: '' }, function() {
        alert("done");
      });
    }
  });
});

为什么这样改有用？ #

事件委托的原理是利用DOM的事件冒泡机制：当你点击动态生成的时，点击事件会向上冒泡到它的父元素#MyDiv（这个元素在页面初始化时就存在），而我们已经给#MyDiv绑定了事件处理逻辑，它会判断触发事件的是不是元素，如果是，就执行我们写的无刷新加载逻辑。

这样一来，不管是初始页面里的，还是后续任何时候动态加载进来的，只要它在#MyDiv内部，点击时都会触发我们的自定义逻辑，不会再出现页面跳转的问题。