JQuery中实现根据点击链接动态修改弹窗跳转链接

你的问题出在每次点击外部链接时，都给跳转按钮新增了一个点击事件，旧的事件不会自动消失，导致按钮点击时只会执行最早绑定的那个链接跳转逻辑。

直接改代码就行，思路是：只给跳转按钮绑一次点击事件，每次点外部链接时把当前链接存起来，按钮点击时读取这个存好的链接跳转。

修改后的代码：

$(function() {
  // 给跳转按钮绑定一次点击事件，复用逻辑
  $('#redirectButton').click(function() {
    const targetUrl = $(this).data('target-url');
    if (targetUrl) {
      open(targetUrl, '_blank');
      $('.modal').hide(); // 跳转后隐藏弹窗，可选
    }
  });

  // 给所有链接绑定点击事件，不用each遍历
  $('a').on('click', function(e) {
    if (this.hostname !== location.hostname) {
      e.preventDefault(); // 阻止默认跳转，必须加，不然直接打开链接了
      const currentUrl = $(this).attr('href');
      // 把当前要跳转的链接存到按钮的data属性里
      $('#redirectButton').data('target-url', currentUrl);
      $('.modal').show();
    }
  });
});

补充说明：

• 去掉了没必要的each循环，直接给所有a标签绑定点击事件更简洁
• 加了e.preventDefault()，阻止链接的默认跳转行为，不然弹窗还没交互就直接打开外部链接了
• 跳转按钮只绑定一次逻辑，每次点击外部链接时更新它要跳转的目标URL，从根源避免事件堆积

内容的提问来源于stack exchange，提问作者pathetic.aesthetic