使用jQuery在单击后更改链接的href

Question

我想创建一个链接，当它被点击时，会切换它的href属性，然后跳转到该位置。

我的HTML代码如下：

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

当点击时，我希望浏览器跳转到data-wpurl位置而不是href位置。我使用data属性的原因是因为我使用的应用程序需要使用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()无效！ 任何想法？

- JCHASE11

---

可以做到，但只是好奇使用案例是什么... - Ejaz

我需要获取除了移动端以外的href...所以在我的js中，我使用条件语句。我希望链接根据屏幕尺寸触发不同的url。 - JCHASE11

Answer 1

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

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

从我的角度来看，这是一个更加通用和清晰的解决方案，因为这不会改变默认的浏览器行为（例如：当用户使用鼠标滚轮单击链接时，使用 Jack 的解决方案不会打开新选项卡）。

- Gerwald

---

谢谢您。这是最易读和最简单解释的答案。 - Andrew Grimm

简单而有效。谢谢！ - Krishna Mohan

Answer 2

立即更改位置可能会更容易：

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

- Ja͢ck

---

如果你要把用户带到一个新页面，实际上没有必要更新链接的href。 - user428517

Answer 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>

- Dan

---

vanillajs: e.href = e.dataset['wpurl']; vanillajs：e.href = e.dataset['wpurl']; - l3est

Answer 4

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

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

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

- Ross Angus