求修改/编写简易JavaScript实现多页面脚注链接弹窗打开

我修改了一个Tabs Demo用于项目，现在遇到问题：每个页面的脚注链接，希望点击时打开一个600px×600px的类似Kindle风格新窗口。我尝试了以下脚本，但它仅在第一个页面生效：

onload=function(){
  for(i=0;d=document.getElementsByTagName('a')[i++];){
   if (d.href.match(/.*hotel\d+\.html/)){
     d.onclick=function(){window.open(this.href,'a','width=740, height=750, resizable=yes, scrollbars=yes, left=20, top=20');return false}
   }
  }
}

问题原因 #

原脚本仅在页面初始加载时执行一次，而你的Tabs是AJAX动态加载内容，切换标签后新页面的链接元素是后续生成的，没有被绑定点击事件，导致只有初始页面的链接生效。

方案1：事件委托（推荐，适配动态加载内容） #

利用事件冒泡机制，给全局或公共父容器绑定事件，无需逐个链接绑定，天然支持动态新增的元素，代码更简洁高效：

// 绑定到document，也可以替换为所有页面的公共父容器（比如.tabs-content-wrap）
document.addEventListener('click', function(e) {
  const targetLink = e.target.closest('a');
  // 验证是否是目标脚注链接
  if (targetLink && /.*hotel\d+\.html/.test(targetLink.href)) {
    e.preventDefault(); // 阻止默认跳转
    // 打开指定尺寸的新窗口，窗口名设为footnoteWindow可复用窗口，如需每次新开可改为'footnote'+Date.now()
    window.open(targetLink.href, 'footnoteWindow', 'width=600, height=600, resizable=yes, scrollbars=yes, left=20, top=20');
  }
});

方案2：改进原脚本（适配AJAX加载） #

如果坚持原思路，需将绑定逻辑封装为函数，在初始加载和每次AJAX页面切换完成后重新执行：

function bindFootnoteWindowLinks() {
  // 筛选所有符合规则的链接
  const targetLinks = document.querySelectorAll('a[href*="hotel"]');
  targetLinks.forEach(link => {
    if (/.*hotel\d+\.html/.test(link.href)) {
      link.onclick = function(e) {
        e.preventDefault();
        window.open(this.href, 'footnoteWindow', 'width=600, height=600, resizable=yes, scrollbars=yes, left=20, top=20');
      }
    }
  });
}

// 页面初始加载时执行绑定
window.addEventListener('load', bindFootnoteWindowLinks);

// 找到你Tabs组件的AJAX加载完成回调，在其中再次调用绑定函数
// 示例（根据实际Tabs的回调机制调整）：
// yourTabComponent.on('contentLoaded', bindFootnoteWindowLinks);

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