Question

I have a function as follows:

$(document).on("click", ".songTilesGenreContainer", function () {
    if ($(this).find(".actualTilesContainer").hasClass("minimalized")) {
        $(this).find(".actualTilesContainer").removeClass("minimalized");
        $(this).find(".actualTilesContainer").addClass("maximized");
        $(this).find(".actualTilesContainer").slideDown();
    }
    else {
        $(this).find(".actualTilesContainer").removeClass("maximized");
        $(this).find(".actualTilesContainer").addClass("minimalized");
        $(this).find(".actualTilesContainer").slideUp();
    }
});

Whenever user clicks on the .songTilesGenreContainer it is going to slideDown or slideUp depending on which class it has. The problem is that in that container I have some elements that I can click on and I would like the .songTilesGenreContainer not to slideUp when I click on the specified elements. To my knowledge by using the .not function does exactly what I want but how would I use it with the .on event handler?
Thanks

Answer 1

Add a class to all those elements for which you don’t want to execute the required code. In the click handler check for event target and if it has that class then just don’t do anything. Try this

$(document).on("click", ".songTilesGenreContainer", function (e) {

        //Check if the target has that class
        if($(e.target).hasClass("className")){
            e.stopPropagation();
            return false;
        }

        if ($(this).find(".actualTilesContainer").hasClass("minimalized")) {
            $(this).find(".actualTilesContainer").removeClass("minimalized");
            $(this).find(".actualTilesContainer").addClass("maximized");
            $(this).find(".actualTilesContainer").slideDown();
        }
        else {
             $(this).find(".actualTilesContainer").removeClass("maximized");
            $(this).find(".actualTilesContainer").addClass("minimalized");
            $(this).find(".actualTilesContainer").slideUp();
            }
        }
    });