CODEWITHSUNDEEP
jquerysharepoint
Gary
Gary

Reputation: 747

e.preventdefault(); not working

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.

Upvotes: 45

Views: 146417

Answers (8)

pckozub
pckozub

Reputation: 39

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

Upvotes: 2

Rod Johnson
Rod Johnson

Reputation: 2427

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();


});

Upvotes: 13

jcsierra.27
jcsierra.27

Reputation: 591

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)

Upvotes: 59

Steward Godwin Jornsen
Steward Godwin Jornsen

Reputation: 1179

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.

Upvotes: 0

designerdre101
designerdre101

Reputation: 813

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);
});

Upvotes: 2

Josh
Josh

Reputation: 11070

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.

Upvotes: 3

David Hedlund
David Hedlund

Reputation: 129792

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.

Upvotes: 6

Teja Kantamneni
Teja Kantamneni

Reputation: 17472

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

Upvotes: 3

Related Questions