Question

I have an element like so:

<a class='link' href='/page1'>Page 1</a>

It has a click handler attached like so:

$('.link').click(function() { loadPage('page1'); });

When the link is clicked, the new page loads. However, there are two ways of loading the new page. One is via AJAX, which figures out which elements have changed between the pages and reloads sections without refreshing based on that, and one which loads via a normal GET request.

I would like to set the href of the link to the URL for normal loading, and the onlick() to call the javascript function that does the AJAX loading. However, they are both firing when I click the link, resulting in the page refreshing completely.

Is there a way to prevent the “href” from taking effect when Javascript is available?

Answer 1

$('.link').click(function() { loadPage('page1'); return false });

Or

$('.link').click(function(e) { e.preventDefault(); loadPage('page1'); });

First is also stop bubbling. Second, only prevent… default action (*which is going to a link)