Question

I get confused by preventDefault().

I got the following working as my test

$('.next').click(function(e){
        if(e.preventDefault){
            console.log("asdfnext");
            e.preventDefault();
        }else{
            console.log("next");
            return false;   
        }       
    });

and this is part of the working file.

<a class='next' href='http://www.bbc.co.uk'>Next</a>
<a class='previous' href='http://www.facebook.com'>previous</a>

according to the above i can stop my link going to either bbc or facebook.
and you can check it on here http://jsfiddle.net/puQ7H/

but when I try to implement this on as follow I get fail and I really like to know why

$('#step0Next').click(function(e){
            if($(this).is('.disabled')){
                console.log("disabled");                    
                    if(e.preventDefault){
                        console.log("asdfnext");
                        e.preventDefault();
                        return false;   
                    }else{
                        console.log("next");
                        return false;   
                    }   

            }else{
                console.log("not disabled");    
            }

        });

basically ==> step0Next is my link id

and my css is as follow:

a.disabled { opacity:0.2; cursor: default; }

my idea is if the link is in (‘.disable’) state,
stop going to next step.

Actually link go to next step and I am being stop here. 😛

Answer 1

You are checking if .preventDefault exists with your if-block, why? Try this:

$('#step0Next').click(function(e){
    if($(this).hasClass('disabled')){
        console.log("disabled");                    
        e.preventDefault();   
    } else {
        console.log("not disabled");    
    }
});

And actually .hasClass() is a little faster since it’s not run through the selector engine.