title: Why isn't my checkbox change event triggered?
body: <p>The first function translates a div click into a custom checked/unchecked toggle. The second function translates a checkbox change into a check/uncheck event(this work fine ).</p>
  
  <p>The problem is that when I use the first function to check/uncheck the box, the third function is not called. I am new to javascript, thanks.</p>
  
  <pre><code> $(document).ready(function() {
  /*
    Progressive enhancement.  If javascript is enabled we change the body class.  Which in turn hides the checkboxes with css.
  */
  $('body').attr("class","js");
  
  /*
    Add toggle switch after each checkbox.  If checked, then toggle the switch.
  */
   $('.checkbox').after(function(){
     if ($(this).is(":checked")) { 
       return "&lt;a href='#' class='toggle checked' ref='"+$(this).attr("id")+"'&gt;&lt;/a&gt;";
  
     }else{
       return "&lt;a href='#' class='toggle' ref='"+$(this).attr("id")+"'&gt;&lt;/a&gt;";
  
     }
  
  
   });
  
   /*
    When the toggle switch is clicked, check off / de-select the associated checkbox
   */
  $('.toggle').click(function(e) {
     var checkboxID = $(this).attr("ref");
     var checkbox = $('#'+checkboxID);
  
     if (checkbox.is(":checked")) { 
       checkbox.removeAttr("checked");
  
     }else{
       checkbox.attr("checked","true");
     }
     $(this).toggleClass("checked");
  
     e.preventDefault();
  });
  
  
  });
  
  $(document).ready(function(){
  
  $(":checkbox").change(function(){
  
  if ($(this).is(":checked")) {  $(el).layerSlider('start');
  }else{ $(el).layerSlider('stop');}
  });
  
   });
  </code></pre>