Event bubbling in jQuery - event.stopPropogation not working

Question

I am trying to prevent a click form bubbling to the parent <a> HTML tag. Here is my code:

var $result = $("<a href='" + result["link"] + "' class='list-group-item'></a>");
var $title = $("<h4 class='list-group-item-heading'>" + result['title'] + "</h4>");
var $snippet = $("<p class='list-group-item-text'>" + result['htmlSnippet'] + "</p>");

// some code omitted for brevity

var $expandBooksbutton = $("<button type='button' id='btn-showMoreBooks' class='btn btn-default btn-xs'><span class='glyphicon glyphicon-resize-full'></span> expand</div></button>");

$expandBooksbutton.on('click', function(event){
    event.stopPropagation();
    var height = $('#book-container').height();
    if(height != 200){
        $('#book-container').height(200);
    }
    else{
        $('#book-container').height(100);
    }
});

I am wrapping the whole thing in the anchor tag <a> because I am crafting a search result item.

Regardless of adding event.stopPropogation(); the click event on the <a> still fires.

where are you appending `$expandBooksbutton`. Show the rendered HTML — Shaunak D, Jul 01 '14 at 04:48
var $divMoreBooks = $("
"); $divMoreBooks.append($expandBooksbutton); var $listdivs = $("
"); $listdivs.append($divMoreBooks); $listdivs.append($booklist); $result.append($listdivs); — Vinay Joseph, Jul 01 '14 at 04:51

score 1 · Answer 1 · answered Jul 01 '14 at 04:55

1

You can try this

$(<a tag selector>).on('click',function(e){
    e.preventDefault();
});

answered Jul 01 '14 at 04:55

Tejasva Dhyani

1,342
1
10
19

score 0 · Accepted Answer · edited May 23 '17 at 10:26

There is a difference between preventing bubbling and cancelling out the default browser behaviour. Try adding

return false;

in the end of your handler function, like this

    $expandBooksbutton.on('click', function(event){
    var height = $('#book-container').height();
    if(height != 200){
        $('#book-container').height(200);
    }
    else{
        $('#book-container').height(100);
    }
    return false;

});

This should be the solution if I understood the question correctly.

UPDATE

Sorry, I should have mentioned that there's also an alternative for this (which actually I should have given as an advice primarily) and this is:

event.preventDefault();

This function actually prevents the default behaviour, whereas

return false;

does both (stops bubbling & prevents default behaviour)

There's more info on this here: event.preventDefault() vs. return false

nbrooks · Answer 3 · 2014-07-01T05:05:51.880

Without knowing your full DOM structure, this will be slightly abstract. However event handlers bound to an element before it is added to the DOM aren't actually triggered.

From the jQuery docs:

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on().
To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page. If new HTML is being injected into the page...attach event handlers after the new HTML is placed into the page. Or, use delegated events....

So basically you have two options: Create a handler for a delegated event and bind that to the parent element after the parent is added to the DOM. Note that this approach requires that the parent be nested inside the <a> as well.

$(parent-elem).on('click', '#btn-showMoreBooks', function(e) {
    // your handler logic
});

Of course, you can always keep your logic as-is, but bind the handler to the element only after it's added to the DOM. This is reasonable as long as you won't be re-creating that element dynamically more than once after the initial page load.

Event bubbling in jQuery - event.stopPropogation not working

3 Answers3