如何用jQuery为动态PDF链接绑定onclick事件弹窗打开对应PDF

你原有写法存在两个核心问题：一是直接给初始加载时匹配到的元素绑定onclick属性，后续动态生成的PDF链接无法生效；二是弹窗地址硬编码，无法读取当前点击链接的真实地址。
直接使用事件委托实现即可，代码如下：

// 委托监听所有PDF链接点击事件，兼容动态生成的元素
$(document).on('click', "a[href$='.pdf']", function(e) {
  // 阻止链接默认的跳转/新开标签页行为
  e.preventDefault();
  // 读取当前点击链接的href属性作为弹窗加载地址
  const targetPdfUrl = $(this).attr('href');
  // 打开指定尺寸的弹窗加载对应PDF
  window.open(targetPdfUrl, 'pdfPreviewPopup', 'width=600,height=600,scrollbars=yes');
});

优化提示 #

• 如果所有PDF链接都在固定的父容器内（例如class为doc-list的列表容器），可以将代码中的$(document)替换为对应父容器的jQuery对象，事件监听性能更好
• 如果你需要自定义弹窗的更多属性，可以在window.open的第三个参数里追加配置，比如补充resizable=yes允许用户调整弹窗大小、top=100,left=100设置弹窗初始位置
• 原有链接上的target="_blank"属性不需要额外手动删除，e.preventDefault()会直接拦截默认行为，不会触发原生的新标签页跳转

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