Why isn't my checkbox change event triggered?

Question

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 ).

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.

 $(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 "<a href='#' class='toggle checked' ref='"+$(this).attr("id")+"'></a>";

   }else{
     return "<a href='#' class='toggle' ref='"+$(this).attr("id")+"'></a>";

   }


 });

 /*
  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');}
});

 });

see http://stackoverflow.com/a/5916151/1176601 – Aprillion Apr 13 '13 at 11:04 — Aprillion, Apr 13 '13 at 11:04

score 1 · Accepted Answer · answered Apr 13 '13 at 11:40

To add an event to dynamic contents (in this case the dynamic anchor element) you will have to use live or on function.

For jquery version earlier to 1.7 you will have to use Live function.

$('.toggle').live("click", function (e) {   
        var checkboxID = $(this).attr("ref");
        var checkbox = $('#' + checkboxID);

        if (checkbox.is(":checked")) {
            checkbox.prop('checked', false);

        } else {
            checkbox.prop('checked', true);  //jQuery 1.6+
        }
        e.preventDefault();
    });

From jQuery 1.7+ Live is deprecated and from 1.9+ Live is removed.So, if you are using jQuery 1.9+ use On.

$('.toggle').on("click",function (e) {   
        var checkboxID = $(this).attr("ref");
        var checkbox = $('#' + checkboxID);

        if (checkbox.is(":checked")) {
            checkbox.prop('checked',false);

        } else {
            checkbox.prop('checked', true);  //jQuery 1.6+
        }
        e.preventDefault();
    });

And also use prop function to check / uncheck the checkbox. (Prop is added from jQuery 1.6)

You don't have to use LIVE even for jquery < 1.7, it's still better to use delegate: http://api.jquery.com/delegate/ — A. Wolff, Apr 13 '13 at 11:44
Events change works fine now but the third function $(":checkbox").change(function() is not working , the function that check the event change and execute the code that I need in this case . — Gabriel Bora, Apr 13 '13 at 13:06
@Gabriel Bora you can move the functionality of the third function logic inside $('.toggle').on("click", function (e) {}). for example inside the function modify the logic to if (checkbox.is(":checked")) { checkbox.prop('checked', false); $(el).layerSlider('stop'); } else { checkbox.prop('checked', true); $(el).layerSlider('start'); } — Faisal Ahmed, Apr 13 '13 at 16:40

score -2 · Answer 2 · answered Apr 13 '13 at 10:50

-2

you need trigger change event on checkbox, not click

answered Apr 13 '13 at 10:50

monkeyinsight

4,719
1
20
28

Could help me with an example how to use trigger change event on checkbox . Thanks – Gabriel Bora Apr 13 '13 at 10:56

Why isn't my checkbox change event triggered?

2 Answers2