title: Trigger function based on Class Change
body: <p>I have the following. I am trying to trigger the function based on the css class changing but it's not working.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  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');
  </code></pre>
  
  <p>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?</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>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?)</p>
  
  <p><strong>My attempt to adapt gdoron's <a href="https://stackoverflow.com/a/9599875/601179">answer</a> linked to below:</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  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);
      }
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>I'm still missing something, though. It only works for the first class on page load.</p>
  
  <p>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.</p>