e.preventdefault(); not working

Question

I'm having real trouble getting e.preventDefault(); to work.

Here is my code

$('#ListSnapshot a').live('click', function(e){
    var url = $(this).attr('href') +' #WebPartWPQ2 .ms-listviewtable';
    $('#ListSnapshot').load(url);
    e.preventDefault();
});

Could someone explain what I'm doing wrong, I can see the load function work but then the page redirects to the clicked link which I need to prevent.

I have also tried moving e.preventDefault(); to the top of the function, to no avail.

Answer 1

I had a similar problem, in which e.preventDefault() would work on some cases, but not on others. It showed no errors, and using try-catch was not displaying the catch alert . Adding e.stopImmediatePropagation() did the trick, in case it helps anyone (big thanks to wcpro)

Answer 2

i think you may have the following scenerio... at least, this will reproduce the error

you may have an event higher up that is setup for the hover event, that event may be using bind, and even if you call e.preventdefault it will still call the bind first, so you may need to make the one higher up use live instead of bind. then it should work as expected. check this sample.

http://jsfiddle.net/rodmjay/mnkq3/

$('div').bind ('click', function(){ // <-- switch this to live and you will see different behavior

    alert('div click');

});

$('a').live('click', function(e){


    alert('a click');

    e.stopImmediatePropagation();


});

Answer 3

The code you've provided should definitely be working ( working example ). There's got to be another issue with your code.

Try placing an alert inside your event handler to make sure that it fires at all . It's possible that your #ListSnapshot a isn't finding anything.

If something else is wrong inside your handler, that causes an exception, that could prevent the javascript from executing all the way to the preventDefault call. I don't see what that could be in the code you've provided, tho.

Answer 4

I think @David Hedlund's answer is correct, there must be an exception happening. When I write event handlers I use a try...catch block to make sure that the default action doesn't happen. Try this:

$('#ListSnapshot a').live('click', function(e){
    try {
        var url = $(this).attr('href') +' #WebPartWPQ2 .ms-listviewtable';
        $('#ListSnapshot').load(url);
    } catch(ex) {
        alert('An error occurred and I need to write some code to handle this!');
    }
    e.preventDefault();
});

That way, since e.preventDefault(); is outside the try block, even if an error occurs, e.preventDefault(); will still be called.

Answer 5

e.preventDefault() should execute before the other lines of code in the handler.

$('#ListSnapshot a').live('click', function(e){
    e.preventDefault();
    var url = $(this).attr('href') +' #WebPartWPQ2 .ms-listviewtable';
    $('#ListSnapshot').load(url);
});

Answer 6

Try returning false . live will not always work the same way as bind works. check jquery docs .

Answer 7

Have you tried wrapping the event handler in $(document).ready(...) first? Just a thought.

Answer 8

Old question but this is just the kind of moment should see what firebug logs in the console or returns as error. Something in your code is obviously preventing preventDefault() from prevent a redirect.