Jquery : e.preventDefault is not working?

Question

I have a HTML snippet as

  <div class="playlist" id='{{ playlist.name }}'>
         {{ playlist.name }} 
        <button class="btn btn-primary queueAll" href="#">queue all</button> 
        <i class="icon-chevron-right icon-large"></i>
   </div>

and corresponding jQuery function as

$(function(){
    $('#playlist').click(function(){
        $.ajax({
            url: '/getUserPlaylists',
            success: function(response, textStatus, jqXHR){
                // console.log(response);
                $('#feature').empty().append(response);
            },
            error: function(response, textStatus, jqXHR) {
                bootstrap_alert.error('error in receving playlists');
            }
        });
    });
});

What I want

When user clicks on queue all button, alert should pop up and nothing happens afterwords

my jQuery function for that is

$(function(){
    $('body').on('click', '.queueAll', function(e) {
        e.preventDefault();
        alert('will queue all videos');
    });
});

whats happening now?

I do ge the alert 'will queue all videos' but it then makes the ajax call as listed in first jQuery function and loads the next page with results

How is it that e.preventDefault() is not working as expected?

possible duplicate of [Prevent execution of parent event handler](http://stackoverflow.com/questions/1398582/prevent-execution-of-parent-event-handler) — Felix Kling, Aug 16 '12 at 23:30
The default action of this button is submitting the form it is part of. But since it is not inside a form there is no default action and `e.preventDefault()` won't do anything. What you want is to prevent the event from bubbling up. — Felix Kling, Aug 16 '12 at 23:32
@FelixKling You are very talented in finding the related questions. 1++ — Ram, Aug 16 '12 at 23:33
@undefined: Not that talented ;) The other question does not take into account event delegation. But this one does: **[Stop propagation on live elements](http://stackoverflow.com/questions/10672633/stop-propagation-on-live-elements)**. — Felix Kling, Aug 16 '12 at 23:34
`stopPropagation()` is what was needed and not `preventDefault()`. Thank you for relevant link — daydreamer, Aug 17 '12 at 01:56

adeneo · Answer 1 · 2012-08-16T23:38:35.190

Firstly, your button should'nt have a href attribute, secondly preventDefault prevents the default action of an element. It will prevent a link from redirecting to the url in the href or prevent a form from being submitted etc. It does not prevent event handlers attached with javascript, for that you will have to unbind the handler.

You're also targeting an element with the ID playlist, but it seems that is a class, unless the playlist.name is just playlist ?

Unless it's dynamic, something like this maybe :

$(function(){
    $('.queueAll').on('click', function(e) {
        alert('will queue all videos');
        return false;
    });
});

or :

$(function(){
    $('#playlist').click(function(e){
        if (e.target.tagName !== 'BUTTON') { //make sure it's not the button
            $.ajax({
                url: '/getUserPlaylists',
                success: function(response, textStatus, jqXHR){
                    // console.log(response);
                    $('#feature').empty().append(response);
                },
                error: function(response, textStatus, jqXHR) {
                    bootstrap_alert.error('error in receving playlists');
                }
            });
        }
    });
});

powerbuoy · Answer 2 · 2012-08-17T00:42:25.863

I believe what you're after is in fact e.stopPropagation() which will stop the event bubbling up to its parent.

Edit: Like Adam points out, since you're using on() and actually attaching the event to the body element and not the button the event will already have bubbled past the #playlist element once your code fires.

I believe what you need to do instead is check in your #playlist click handler if the target (event.target) is the button (or rather, isn't the #playlist element):

$('#playlist').click(function(e){
    if ($(e.target).is('#playlist')) {
        // Do stuff here as it was the #playlist element that was clicked - NOT a child of it
    }
});

That won't work because the event will have had to have propagated to the body for the event to get fired. — Adam Jenkins, Aug 16 '12 at 23:32

Jquery : e.preventDefault is not working?

2 Answers2