Make jQuery wait for href change before it reads href?

Question

Imagine the following markup:

<a href="#link01">1</a>
<a href="#link02">2</a>

And:

$('a').click(function(){
   var href = $(location).attr('href'),
   hrefLenght = href.length,
   hrefPos = href.indexOf("#"),
   hrefPage = href.slice(hrefPos+1);
   alert(hrefPage);
});

Now, what happens after you click a link is that jQuery alerts the hrefPage which was there before you clicked the link, not after, as expected. Therefore:

1) I'm located at http://www.example.com/#link01
2) I click a link
3, result) link01 is echoed
3, expected) link02 is echoed

Any ideas how to fix this?

EDIT: Why am I using location instead of href? Because I want the aforementioned code to work also when the page loads with the href without anything having been clicked at all and I don't think it's a good idea to write two pieces of code for the same process?

You're trrying to implement a "page location changed" handler with a link-clicked handler. It doesn't work that way. For starters, `click` fires _first_, but there are other reasons that it can never work. Just take the link's `href` property instead. — Lightness Races in Orbit, Jan 17 '12 at 16:27
No, a click handler for a link won't magically trigger just because you loaded the page. If you want to avoid code duplication, encapsulate the logic in a function and call it in multiple handlers. — Lightness Races in Orbit, Jan 17 '12 at 18:59

score 2 · Answer 1 · answered Jan 17 '12 at 16:24

2

You have a bug in your code. Instead of this keyword you are using location which points to window.location.

$('a').click(function(){
   var href = $(this).attr('href'),
   hrefLenght = href.length,
   hrefPos = href.indexOf("#"),
   hrefPage = href.slice(hrefPos+1);
   alert(hrefPage);
});

answered Jan 17 '12 at 16:24

ShankarSangoli

69,612
13
93
124

I think he meant for that, though this is a valid fix for the problem. – Lightness Races in Orbit Jan 17 '12 at 16:26

Blazemonger · Accepted Answer · 2012-01-17T16:50:44.073

2

You could use the hashchange event to monitor these changes instead:

$('a').bind('hashchange',function(){ 
    var hval = location.hash.slice(1); // remove the leading #
    alert(hval);
});

To trigger the hashchange on page load, so it fires for external links to the hash or when you browse with the back button (instead of only when a link is clicked), add this:

$(document).ready(function() {
    $(window).trigger('hashchange');
});

edited Jan 17 '12 at 16:50

answered Jan 17 '12 at 16:28

Blazemonger

90,923
26
142
180

It does work in IE8+ -- older versions need [a plugin](http://stackoverflow.com/q/680785/901048). – Blazemonger Jan 17 '12 at 16:32

score 0 · Answer 3 · answered Jan 17 '12 at 16:25

Why not use the href of the link you clicked? it will have the value that the href will have after it changes.

$('a').click(function(){
  var href = this.href,
  hrefLength = href.length,
  hrefPos = href.indexOf("#"),
  hrefPage = href.slice(hrefPos+1);
  alert(hrefPage);
  // could also use:
  // alert(this.href.split("#")[1]);
});

score 0 · Answer 4 · edited Jan 17 '12 at 16:30

0

you need to get the url to change before the javascript is run. One way you could do this is to simply put

window.location = $(this).attr('href');

at the top of the javascript code to force the window navigation action to happen before your javascript

example: http://jsfiddle.net/btdqe/

edited Jan 17 '12 at 16:30

Curtis

101,612
66
270
352

answered Jan 17 '12 at 16:28

Lee

10,496
4
37
45

Make jQuery wait for href change before it reads href?

4 Answers4