Make jQuery wait for href change before it reads href?
<p>Imagine the following markup:</p>

<pre><code>&lt;a href="#link01"&gt;1&lt;/a&gt;
&lt;a href="#link02"&gt;2&lt;/a&gt;
</code></pre>

<p>And:</p>

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

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

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

<p>Any ideas how to fix this?</p>

<p>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?</p>
