Trigger function based on Class Change

Question

I have the following. I am trying to trigger the function based on the css class changing but it's not working.

<script type="text/javascript">

jQuery(document).ready(function(){

jQuery("#slider-banner").bind("cssClassChanged",function(){
    console.log("I'm Here!");
    if(jQuery("#slider-banner").hasClass('living-nutrients'))
    {
        jQuery("#home-middle-first").css("background-image","url([image path])");
    }
    else if(jQuery("#slider-banner").hasClass('right-partner'))
    {
        jQuery("#home-middle-second").css("background-image","url([image path])");
    }
    else if(jQuery("#slider-banner").hasClass('with-you'))
    {
        jQuery("#home-middle-third").css("background-image","url([image path])");
    }
});

    jQuery("#slider-banner").trigger('cssClassChanged');

The colsole displays my console.log message on page load, but not when the class changes again after page load. Anyone see what I'm doing wrong?

UPDATE:

So I've learned that "cssClassChanged" is not legit... I was attempting to adapt an answer I found somewhere else... I do realize that if jQuery were a weapon, I'd be dangerous! (knowing that is half the battle, right?)

My attempt to adapt gdoron's answer linked to below:

<script type="text/javascript">

jQuery(document).ready(function() 
{
    function checkForChanges()
    {
        if(jQuery("#slider-banner").hasClass('living-nutrients'))
        {
            jQuery("#home-middle-first").css("background-image","url([image path])");
        }
        else if(jQuery("#slider-banner").hasClass('right-partner'))
        {
            jQuery("#home-middle-second").css("background-image","url([image path])");
        }
        else if(jQuery("#slider-banner").hasClass('with-you'))
        {
            jQuery("#home-middle-third").css("background-image","url([image path])");
        }

        else
            setTimeout(checkForChanges, 500);
    }
});
</script>

I'm still missing something, though. It only works for the first class on page load.

Someone asked how I'm changing the classes. I'm using a slider and on each slide is a div with the ID "slider-banner" and the class varies depending on which of the three ID'd areas below it that I am trying to switch the background image for.

Answer 1

There is no such event cssClassChanged I think that explains all...

10 hours ago I answered how you can detect class change, read my answer there

---

Update:

function checkForChanges()
{
    var sliderBanner = jQuery("#slider-banner");
    if(sliderBanner.hasClass('living-nutrients'))
    {
        jQuery("#home-middle-first").css("background-image","url([image path])");
    }
    else if(sliderBanner.hasClass('right-partner'))
    {
        jQuery("#home-middle-second").css("background-image","url([image path])");
    }
    else if(sliderBanner.hasClass('with-you'))
    {
        jQuery("#home-middle-third").css("background-image","url([image path])");
    }    

    setTimeout(checkForChanges, 500);
}

jQuery(checkForChanges);

Answer 2

There is no cssClassChanged event that I am aware of, you need to manually trigger it. However, you aren't changing the class in the code you posted, therefore I'm not sure where you would want to trigger it.

Answer 3

There is no built-in event named "cssClassChanged". You have created your own custom event, and are triggering it manually during page load. It will not fire automatically -- you'll have to call trigger('cssClassChanged') each time you change the CSS class.

Answer 4

you can wire your own click event listener on slideshow (prev/next) buttons - they will be added in addition to the existing ones.

in your event listeners, you can check css-class for whatever element you are interested in.

$(".prev").on("click", function() { 
//user has explicitly clicked "prev"!!
});
$(".next").on("click", function() { 
//user has explicitly clicked "next"!!
});