Changing a links href after click with jQuery

Question

I am trying to create a link that when clicked on, switches its href attribute, and then goes to that location.

My html is:

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

When clicked, I would like the browser to go to the data-wpurl location, not href location. The reason I am using a data attribute is because of the application I am using requires use of the href...not relevant here.

My jQuery is:

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

I am using e.preventDefault(); to prevent the browser from taking the user to the href. After the data attribute is assigned to the href, how do I then trigger a click? Using trigger('click') and click(); do not work!

Any ideas?

I need the href for everything but mobile...So within my js, I am using a conditional. I want the link to trigger different urls based on screen size. — JCHASE11, May 07 '13 at 17:43

score 35 · Answer 1 · answered Sep 07 '15 at 13:03

35

Similar solution, but without the need of calling e.preventDefault()

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

from my point of view, this is a more general, cleaner solution, as this will not change the default browser behaviour (e.g.: when the user clicks with the mouse wheel on the link, with Jacks solution no new tab will be opened)

answered Sep 07 '15 at 13:03

Gerwald

1,549
2
18
42

Thank you for this. This was the most readable and the simplest explained answer. – Andrew Grimm Sep 09 '15 at 04:58
Simple but effective. Thanks! – Krishna Mohan Apr 14 '18 at 15:15

score 21 · Accepted Answer · answered May 07 '13 at 17:41

21

It would be easier to just change the location immediately:

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

answered May 07 '13 at 17:41

Ja͢ck

170,779
38
263
309

1

this. if you're going to take the user to a new page, there's no reason to actually update the href of the link. – user428517 May 07 '13 at 17:44

score 10 · Answer 3 · answered Jul 23 '14 at 21:07

Use onmousedown. Google uses this method on their search results page so they can track what you clicked. If you want to see where the link will go, right click instead of left. They both trigger the onmousedown event.

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>

vanillajs: `e.href = e.dataset['wpurl'];` – l3est Aug 28 '21 at 19:10 — l3est, Aug 28 '21 at 19:10

score 6 · Answer 4 · answered Apr 24 '15 at 09:01

I think your original jQuery is fine, except for the e.preventDefault(): this will stop the event firing, no matter what you do to the href attribute after that point.

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

All of the above code will execute before the page refreshes.

Changing a links href after click with jQuery

4 Answers4

Linked