Follow link, then execute a function

[Spartanicus]

I need to execute a function after a link to a section within the same
document has been clicked and the navigation has occurred. When using
the onclick event handler the JS function is executed before the
navigation occurs. I can't tie it to a window.onload event since the
link only navigates within the already loaded document.

I'm not having any luck searching due to not knowing what keywords to
use. I looked at an explanation of bubbling vs capturing, but that
doesn't appear to be what I need.

 

[Daz]

I need to execute a function after a link to a section within the same
document has been clicked and the navigation has occurred. When using
the onclick event handler the JS function is executed before the
navigation occurs. I can't tie it to a window.onload event since the
link only navigates within the already loaded document.

I'm not having any luck searching due to not knowing what keywords to
use. I looked at an explanation of bubbling vs capturing, but that
doesn't appear to be what I need.

Enclose the function to be called within a function statement. For
example:

objectName.onclick = function(){ functionToBeCalled(); }

 

[shimmyshack]

so you mean moving to a named section using hash?

<a
name="1"
href="#2"

onclick="javascript:document.location='#2';alert('youve_reached_2');"asdas
</a>

..
..
..
..
<a
id="2"
name="2"
href="#1"

onclick="javascript:document.location='#1';document.getElementById('1').onfocus
= function(){alert('youve_reached_1')};"asdas
</a>

the first onclick uses two js statements so you can be sure the first
executes before the second.
the second onclick does the same but uses onfocus which might be more
predictable.

dont use onclick though right, and this is a dirty solution!

 

[VK]

I need to execute a function after a link to a section within the same
document has been clicked and the navigation has occurred. When using
the onclick event handler the JS function is executed before the
navigation occurs.

Yes, this behavior is by design. As already suggested you can move the
navigation part to the script as well, just don't use the whole href
replacement on hash or IE before 6 may get dizzy or nasty of that

Your links then could be like:

<a href="#anchor001" onclick="self.location.hash='anchor001';
myFunction(); return false">Anchor 001</a>

This way with script enabled "return false" will prevent the default
navigation but will execute the programmed one.

With script disabled you'll get just a regular anchor.