Question

I am replicating some functionality from Google Reader where a table of entries is generated with a star that allows a user to highlight certain rows. I also want the user to be able to click on the row to expand the entry. To expand the row, my jquery reads:

$(".action_row").click(function() {
    if( $(this).next().is(':hidden') ) {
        $(".detailed_row").hide();
        $(".selected-action").removeClass("selected-action");
        $("#current-action").removeAttr("id");
        $(this).next().toggle('fast').addClass("selected-action");
        $(this).addClass("selected-action").attr("id", "current-action");
    } else {
        $(".selected-action").removeClass("selected-action");
        $("#current-action").removeAttr("id");
        $(".detailed_row").hide();
    }
});

It’s not really important what happens during the click, just that clicking .action-row triggers an event.

But inside each action-row is a star:

$(".action-star").click(function() {    

    //Toggle the star through CSS
    $(this).toggleClass("star-checked");
    if ($(this).hasClass("star-checked")) {
        $(this).html("<i class='icon-star icon-large'></i>");
    } else {
        $(this).html("<i class='icon-star-empty icon-large'></i>");
    }               
});

If the user clicks on the star, I only want the star to be toggled. However, right now, when the star is clicked, it triggers both the star toggle and the action_row event.

How should I alter the code so that the action_row code isn’t used if the star is clicked?

Answer 1

read about stopPropagation() and stopImmediatePropagation()

It seems the event is bubbling up from the star to the action-row which is causing you undesired affects.

jquery: stopPropagation vs stopImmediatePropagation

$(".action-star").click(function(e) {    
    e.stopPropagation(); // <-- top stop events from bubbling up
    //Toggle the star through CSS
    $(this).toggleClass("star-checked");
    if ($(this).hasClass("star-checked")) {
        $(this).html("<i class='icon-star icon-large'></i>");
    } else {
        $(this).html("<i class='icon-star-empty icon-large'></i>");
    }               
});