Why isn't my checkbox change event triggered?
<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>
