用jQuery点击后更改链接href答案

【问题标题】：Changing a links href after click with jQuery用jQuery点击后更改链接href
【发布时间】：2013-05-01 18:33:54
【问题描述】：

我正在尝试创建一个链接，当单击该链接时，它会切换其 href 属性，然后转到该位置。

我的html是：

<a href="http://google.com" rel="group" data-wpurl="http://yahoo.com"></a>

点击后，我希望浏览器转到 data-wpurl 位置，而不是 href 位置。我使用数据属性的原因是因为我使用的应用程序需要使用 href...这里不相关。

我的 jQuery 是：

$('a[rel="group"]').on('click', function(e) {
      e.preventDefault();
      var wpurl = $(this).attr("data-wpurl");
      $(this).attr('href', wpurl);
});

我正在使用 e.preventDefault();以防止浏览器将用户带到 href。将 data 属性分配给 href 后，如何触发点击？使用trigger('click') 和click(); 不起作用！

有什么想法吗？

【问题讨论】：

可以做到，只是对用例感到好奇...
除了移动设备外，我需要所有的 href...所以在我的 js 中，我使用了条件。我希望链接根据屏幕大小触发不同的 url。

标签： jquery attributes

【解决方案1】：

类似的解决方案，但无需调用e.preventDefault()

$('a[rel="group"]').on('click', function(e) {
    e.originalEvent.currentTarget.href = $(this).data('wpurl');
});

从我的角度来看，这是一个更通用、更简洁的解决方案，因为这不会改变默认浏览器行为（例如：当用户用鼠标滚轮点击链接时，使用 Jacks 解决方案时不会出现新标签打开）

【讨论】：

谢谢你。这是最易读且解释最简单的答案。
简单但有效。谢谢！

【解决方案2】：

我认为你原来的 jQuery 很好，除了 e.preventDefault(): 这将停止事件触发，无论你在那之后对 href 属性做什么。

$('a[rel="group"]').on('click', function(e) {
      var wpurl = $(this).attr("data-wpurl");
      $(this).attr('href', wpurl);
});

以上所有代码都会在页面刷新前执行。

【讨论】：

【解决方案3】：

使用 onmousedown。谷歌在他们的搜索结果页面上使用这种方法，这样他们就可以跟踪你点击的内容。如果您想查看链接的位置，请右键单击而不是左键。它们都触发了 onmousedown 事件。

http://jsfiddle.net/afLE3/

<a href="http://google.com" data-wpurl="http://yahoo.com" onmousedown="rwt(this)">CLICK HERE</a>

<script type="text/javascript">
  rwt = function(e){
    e.href = $(e).data('wpurl');
  }
</script>

【讨论】：

香草：e.href = e.dataset['wpurl'];

【解决方案4】：

立即更改位置会更容易：

e.preventDefault();
location.href = $(this).data('wpurl');

【讨论】：

这个。如果您要将用户带到新页面，则没有理由实际更新链接的 href。