jQuery stopPropagation() on more than one child object

Question

I have a list of songs, and when you click a song, a drop down menu appears and the song starts playing. I already have it setup so that if you click the drop down menu, it doesn't start pull itself back, you must still click on the original track details to pull it back up.

This example is here: http://shacktown.com

I would also like to attach this functionality to a different button. On a different page, though, I have the play/pause buttons right next to the song title, and I want to attach the stopPropagation() functionality to them as well.

Here is that page: http://shacktown.com/oldstage.php

The code that I'm using is here:

    $(document).ready(function(){
        $('.track').click(function(){
            if ( $(this).find('.trackPlayer').is(':hidden') ) {
                //removing color from prev. track
                $(".selectedTrack").removeClass("selectedTrack");
                $('.trackPlayer').slideUp();
                $(this).addClass("selectedTrack");
                $(this).find('.trackPlayer').slideDown();

            } else {
                $(".selectedTrack").removeClass("selectedTrack");
                $(this).find('.trackPlayer').slideUp();
            }
        }).find('.trackPlayer').click(function(e) {
            e.stopPropagation();
        });
    });

My question is, how do I attach another one of these .find() / stopPropagation() functions without having to create another $(document).ready(function(){}) block?

Clicking the pause/play/stop button should not cause the menu to drop down either, I would like the buttons to be treated as if they were not inside the .track parent at all, if possible.

Answer 1

You can provide multiple CSS selectors. In your case looks like .trackInfo div contains play/pause buttons so the code will be

.find('.trackPlayer, .trackInfo').click(function(e) {
    e.stopPropagation();
});

_{Cool music, btw!}

Answer 2

You can add a new click event within the same document.ready block:

$(document).ready(function(){
    $('.track').click(function(){
        if ( $(this).find('.trackPlayer').is(':hidden') ) {
            //removing color from prev. track
            $(".selectedTrack").removeClass("selectedTrack");
            $('.trackPlayer').slideUp();
            $(this).addClass("selectedTrack");
            $(this).find('.trackPlayer').slideDown();

        } else {
            $(".selectedTrack").removeClass("selectedTrack");
            $(this).find('.trackPlayer').slideUp();
        }
    }).find('.trackPlayer').click(function(e) {
        e.stopPropagation();
    });

    $('.mybutton').click(function(){
        // do stuff here
    });
});

Answer 3

You don't have to chain all your calls together. Just separate them out and make another call to find on your .track object.

$(document).ready(function(){
    var track = $('.track');

    track.click(function(){
        if ( $(this).find('.trackPlayer').is(':hidden') ) {
            //removing color from prev. track
            $(".selectedTrack").removeClass("selectedTrack");
            $('.trackPlayer').slideUp();
            $(this).addClass("selectedTrack");
            $(this).find('.trackPlayer').slideDown();

        } else {
            $(".selectedTrack").removeClass("selectedTrack");
            $(this).find('.trackPlayer').slideUp();
        }
    });

    track.find('.trackPlayer').click(function(e) {
        e.stopPropagation();
    });

    track.find('.somethingElse').click(function(e) {
        e.stopPropagation();
    });
});

If you want to keep the chaining, use end to return to the previous context.

$(document).ready(function(){
    $('.track').click(function(){
        if ( $(this).find('.trackPlayer').is(':hidden') ) {
            //removing color from prev. track
            $(".selectedTrack").removeClass("selectedTrack");
            $('.trackPlayer').slideUp();
            $(this).addClass("selectedTrack");
            $(this).find('.trackPlayer').slideDown();

        } else {
            $(".selectedTrack").removeClass("selectedTrack");
            $(this).find('.trackPlayer').slideUp();
        }
    })
    .find('.trackPlayer').click(function(e) {
        e.stopPropagation();
    })
    .end()
    .find('.somethingElse').click(function(e) {
        e.stopPropagation();
    });
});