unbind click (i.e. stop the element from forwarding the user to the href value) jQuery

Question

What i want to do is stop the clickable link from forwarding the user to the href value as i am calling the value via .load().

Here is my code;

$('#prac_slider li a').click(function(){
    var $permalink = $('#prac_slider li a').attr('href');
    $('div#abc').load($permalink + ' #loadMe');
});

i have tried to add .unbind('click', variable); to the element and loading my above code via a variable but it still seems to forward the user.

Everything else works, it loads the data into #abc but it then forwards the user to the href itself.

How would i disable this?

Answer 1

Use return false:

$('#prac_slider li a').click(function(){
    var $permalink = $('#prac_slider li a').attr('href');
    $('div#abc').load($permalink + ' #loadMe');
    return false;
});

This prevents the default action from being performed, in the case of an a it prevents the link being followed, in the case of a checkbox it prevents un/checking of the box.

You could, similarly, use event.preventDefault():

$('#prac_slider li a').click(function(event){
    event.preventDefault();
    var $permalink = $('#prac_slider li a').attr('href');
    $('div#abc').load($permalink + ' #loadMe');
});

As pointed out by T.J. Crowder, in the comments below, event.preventDefault() and return false are not equivalent: return false is event.preventDefault and event.stopPropagation() (the latter of which prevents the event from bubbling up the DOM tree).

Reference:

• event.preventDefault().
• event.stopPropagation().
• The accepted answer, from Karim79, in the Stack Overflow question: event.preventDefault() vs. return false