CODEWITHSUNDEEP
jquery
daydreamer
daydreamer

Reputation: 92149

Jquery : e.preventDefault is not working?

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

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?

Upvotes: 0

Views: 501

Answers (2)

powerbuoy
powerbuoy

Reputation: 12848

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

Upvotes: 0

adeneo
adeneo

Reputation: 318342

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

Upvotes: 1

Related Questions