event.preventDefault() not working (jQuery live)

Question

EDIT:

The goal is to NOT have the screen move to the top of the page when clicking the link. I just want it to hide the short description and show the full one.

jQuery("#more_info a").live('click', function(event)
{
    event.preventDefault();
    jQuery('#food_desc').hide();
    jQuery('#food_desc_full').show();
});

The above code works except for stopping the default event (going to the top of the page) from happening. Is it because of the live() event?

EDIT:

I even tried this:

if (data.body_summary)
{
    jQuery("#food_desc").append('<p id="more_info"><a href="#">MORE &raquo;</a></p>');
    jQuery("#more_info a").click(function(event)
    {
        event.preventDefault();
        jQuery('#food_desc').hide();
        jQuery('#food_desc_full').show();
        return false;
    });

}

Still goes to top of page...

I also tried this:

jQuery("body").delegate("#more_info a", "click", function(event) 
{
    event.stopPropagation();
    event.preventDefault();
    jQuery('#food_desc').hide();
    jQuery('#food_desc_full').show();
    return false;
});

It does the show/hide of long/short description but doesn't stop the page from going to top.

Yes, because `live` binds the event to the document. Are you aware that it's [deprecated](http://liveisdeprecated.com)? — James Allardice, Jul 23 '12 at 14:34
When the event handler is executed, the event already bubbled to the top. But `preventDefault` does not stop the event propagation anyway, `stopPropagation` does. It won't help either though... you have to bind the event handler to an element that is between `#more_info a` and `#food_desc` if you want to prevent it reach those elements. — Felix Kling, Jul 23 '12 at 14:35
@ChrisMuench - Event delegation with [`.on()`](http://api.jquery.com/on/) (jQuery 1.7+) or [`.delegate()`](http://api.jquery.com/delegate/). — James Allardice, Jul 23 '12 at 14:35
`return false;` works perfectly: http://jsfiddle.net/S8QPX/. We could help you more if you explain what you are actually trying to do and provide an example of your markup. — Felix Kling, Jul 23 '12 at 14:44
just FYI since you are dynamically adding those elements. ID's must be unique. Unless you are only adding it once it would be a good idea to append a number or something after the ID — wirey00, Jul 23 '12 at 15:04

score 0 · Answer 1 · edited Jul 23 '12 at 16:07

0

From the docs:

Calling event.stopPropagation() in the event handler is ineffective in stopping event handlers attached lower in the document; the event has already propagated to document.

You should use .on() instead, or .delegate() if you don't yet use 1.7+.

edited Jul 23 '12 at 16:07

Ry-

218,210
55
464
476

answered Jul 23 '12 at 14:45

jbabey

45,965
12
71
94

score 0 · Answer 2 · edited Jul 23 '12 at 23:10

0

Isn't this because of the # in the href?

edited Jul 23 '12 at 23:10

Anthony

12,177
9
69
105

answered Jul 23 '12 at 14:48

Grzegorz Kaczan

21,186
3
19
17

score 0 · Answer 3 · edited May 23 '17 at 12:15

0

You me need return false in the onclick event of the tag. Check out this SO question event.preventDefault() vs. return false

edited May 23 '17 at 12:15

Community

1
1

answered Jul 23 '12 at 16:13

CambridgeMike

4,562
1
28
37

I tried adding onclick="return false;" to the markup and that doesn't work either. I never remember having so much trouble getting the default action NOT to fire. – Chris Muench Jul 23 '12 at 17:12

score 0 · Answer 4 · answered Feb 21 '14 at 18:36

0

you need to do return false; in delegate for live both you e.stopPropagation(); useless

answered Feb 21 '14 at 18:36

event.preventDefault() not working (jQuery live)

4 Answers4