jQuery：动态更改所有 href 值答案

【问题标题】：jQuery: Change all href values dynamicallyjQuery：动态更改所有 href 值
【发布时间】：2019-09-16 15:59:53
【问题描述】：

我一直在寻找这样的问题，但他们都没有回答我的问题。

请原谅我有时缺乏解释自己的能力。

我在 sub1.domain.com 中有一个页面，其中所有链接的格式为

<a href="/link?param=whatever">

我正在使用 jQuery 将基域更改为 sub2.domain.com 之前的 /link 部分与页面上所有 href 的主机不同。我在研究这个问题时发现了这个 sn-p。这是代码：

$('a').each(function() {
  $(this).attr("href", function(index, old) {
        return old.replace("/link", "https://sub2.domain1.com/link");
  });
});

它就像静态链接的魅力，但问题是该页面是一个搜索结果页面，即使在页面加载后也会动态加载新结果。

如何使其动态化，以便搜索加载的所有链接都被此脚本自动修改？换句话说，我如何将此脚本应用于页面加载后出现的链接并且新结果出现？

base href 在这种情况下不起作用，因为它会破坏整个页面。

谢谢。

【问题讨论】：

加载新结果的函数是什么？当您向下滚动足够远时会触发它吗？为什么不在内容加载后应用相同的逻辑？

标签： javascript jquery dynamic

【解决方案1】：

您实际上可以将此事件绑定到单击。因此，当单击链接时，它将运行此功能并更改链接。然后，这也会更改任何新链接，只要它绑定到父级或下面的文档即可

$(document).on('click', 'a', function(e){
  e.preventDefault();

  var link = $(this).attr( 'href' );
  link = link.replace("/link", "https://sub2.domain1.com/link");
  window.location.href = link;
});

【讨论】：

哇，非常感谢。就这样搞定了！非常漂亮和干净，但我的链接不再像以前那样在新标签中打开。嗯……
啊，我明白了。我改变了 window.location.href = link;到 window.open(link);并且链接现在在新标签中打开。非常感谢！
@Marex 虽然有些浏览器会屏蔽弹窗，但请注意这一点！
@AdnaneAr 但是链接不会作为弹出窗口打开，只是新标签页
@Marex 有时，如果新标签页是由 javascript 打开的，则它们会被视为弹出窗口！

【解决方案2】：

欢迎来到 SO。我建议您创建一个自定义事件并在您需要的任何搜索或任何其他操作上触发它。这种方法将为您提供良好的灵活性和可读性。

const table = $('#table');
let counter = 1;

$('#btn').on('click', function() {
  const row = $('<tr>');
  const cell = $('<td>');
  const link = $('<a>', {
    href: '/linktest',
    text: 'Test link ' + counter++
  });

  cell.append(link);
  row.append(cell);
  table.append(row);

  table.trigger('table.updated'); //triggering custom event
});


table.on('table.updated', function() { //custom event handler
  $('#table a').each(function() {
    $(this).attr('href', '/whatever_you_want');
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='table'>
  <tr>
    <td><a href='/link'>Test link</a></td>
  </tr>
</table>

<button type='button' id='btn'>
  Add row
</button>

【讨论】：

我采用了第一个解决方案，并且非常紧凑。感谢您的帮助！

【解决方案3】：

我想知道为什么没有其他答案提到 jQuery 允许我们使用相同的 querySelector 来定位所有元素，例如，如果您想定位所有 aHref Elements，您可以在字母 a 之后添加一个空格，就像 @ 987654322@！

const newLink="https://www.mynewLink.com";
$("a ").attr("href", newLink);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a target="_blank" href="https://www.google.com">Google</a>
<br><br>
<a target="_blank" href="https://www.facebook.com">Facebook</a>

【讨论】：