Question

I added javascript to detect when a link is clicked, which works properly, however now the links aren’t working (ie. they don’t take the user to the linked page).

HTML:

<div class="designflow" style="padding-left:50px;padding-right:0px;padding-top:0px;padding-bottom:15px;margin-top:0px;float:left; font-size:18px; color: gray; height:150px; width:150px;margin-left:auto;margin-right:auto;display:inline-block;"> 
<a href = "/manufacturing/" class = "designflow" id = "manufacturing">
<img src="{{STATIC_URL}}pinax/images/manufacturing.png" width = "150px" style=margin-bottom:0px;" alt=""><br>
<p style="position:absolute;bottom:25px;padding-left: 0px; padding-right:0px; width:150px;text-align:center;">Manufacturing</p></a>
</div>

JQUERY:

jQuery( 'div.designflow a' )
    .click(function() {
        do_the_click( this.id );
        return false;
    });
function do_the_click( designstage )
{
    alert(designstage);
}

Answer 1

The click handler disables them due to returning false

When you return false from an event handler you tell the runtime to stop processing it. This also includes to stop the default action. In this case to stop the link from being a link.

if you remove the ‘return false’ line. Then the link will work as a link usually does again

jQuery( 'div.designflow a' )
    .click(function() {
        do_the_click( this.id );
    });

however taking from the name of the methods you probably do want to return false and then handle the relocation in the event handler.

In JavaScript you can navigate to a new url like this:

window.location = newUrl;