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.

I have a feeling there's something else going on here, because `preventDefault` *should* be working. Can we see the markup / other code? — James, Jul 29 '10 at 12:42
Like J-P has said, it looks like there's something else going on here at it should work as expected. Can you provide the HTML for #ListSnapshot and it's children? — djdd87, Jul 29 '10 at 12:46
I removed the answer from your question, you should post it as answer when the question is open again. — Johannes Kuhn, Dec 11 '13 at 15:06
I know this is closed, but I found it on Google just like many others will when they have this problem. My problem was simply that another click event was being binded to the element at a later point in the script, overwriting the existing click event and causing e.preventDefault() to fail. Hope that helps someone else that runs into this problem. — Eric, Jan 30 '14 at 20:44
I also know this is closed but found it on Google. Had the same issue but the root cause turned out to be that I had over written the file which called the javascript on the page! — Doodled, Apr 21 '17 at 15:05
Same googling issue here, try https://stackoverflow.com/a/70264343/7089048 — David, Aug 12 '22 at 13:13

score 48 · Answer 1 · edited Apr 02 '13 at 07:23

48

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)

edited Apr 02 '13 at 07:23

Baby Groot

4,637
39
52
71

answered Apr 02 '13 at 07:01

jcsierra.27

481
4
2

3

Thanks, worked well. This should be marked as the answer. – Damitha Mar 11 '18 at 12:47

score 13 · Answer 2 · edited Jan 08 '17 at 21:24

13

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


});

edited Jan 08 '17 at 21:24

Arun Kumar Mohan

11,517
3
23
44

answered Nov 03 '10 at 22:55

Rod Johnson

2,387
6
30
48

1

This can happen to delete link for Rails, as Rails will add events which you might not be aware. – lulalala Jan 28 '13 at 06:13
That's was my issue, thanks to helped me :) – Joffrey Outtier Jul 20 '21 at 12:26
.live() has been removed in jQuery 1.9; use on() instead. – Rasmus Jan 25 '22 at 09:29

score 6 · Answer 3 · answered Jul 29 '10 at 12:47

6

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.

answered Jul 29 '10 at 12:47

David Hedlund

128,221
31
203
222

2

I think this is probably the answer. `try..catch` should help. – Josh Jul 29 '10 at 13:19
1

Ive edited the question because i wasnt sure how to add a reply, and could not fit it all in this box. Thanks Again – Gary Jul 29 '10 at 18:19
@Gary: You did the best thing -- Editing your question with detail and then commenting to let others know to review your edited question is the appropriate way to handle this. That being said, given that the alert does show, I'm not sure what the issue is. It's not an exception as I had suspected :-( – Josh Jul 30 '10 at 20:19

score 3 · Answer 4 · answered Jul 29 '10 at 12:41

3

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

answered Jul 29 '10 at 12:41

Teja Kantamneni

17,402
12
56
86

2

Thanks, im afraid ive tried that but still no luck. Thanks Again Gary – Gary Jul 29 '10 at 18:21
I'm using .on() and return false worked for me! – servermanfail Jul 21 '14 at 11:28

score 3 · Answer 5 · answered Jul 29 '10 at 13:18

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.

score 2 · Answer 6 · answered Sep 20 '12 at 20:44

2

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

answered Sep 20 '12 at 20:44

designerdre101

795
1
6
7

Yeah that fixed it for me in testing on the iPhone 6S Plus. Thanks! – mattauckland Dec 10 '15 at 02:29

score 2 · Answer 7 · edited Jul 08 '22 at 05:48

2

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

edited Jul 08 '22 at 05:48

TarangP

2,711
5
20
41

answered Jul 13 '11 at 18:38

pckozub

39
2

score 0 · Answer 8 · answered Feb 25 '13 at 20:59

0

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.

answered Feb 25 '13 at 20:59

Steward Godwin Jornsen

1,181
1
7
13

e.preventdefault(); not working

8 Answers8

Linked