CODEWITHSUNDEEP
javascriptjquery
Ramprasad
Ramprasad

Reputation: 8071

List Checkbox change event not fire in jquery

List Checkbox change event not fire in jquery.

List Creation:

$("#my_list").append("<li><input type='checkbox' class='my_list_checkbox' value='"+id+"' name='"+name+"'/><img class=\""+icon_class+"\" /><label style='padding-left:25px'>"+name+"</label></li>");

I tried following events,but no one works,how solve this issue?

$(".my_list_checkbox").on("change",function(){
    console.log("clicked");
});

$(".my_list_checkbox").click(function(){
    console.log("clicked");
});

$("#my_list .my_list_checkbox").on("change",function(){
    console.log("clicked");
});

$("#my_list .my_list_checkbox").click(function(){
    console.log("clicked");
});

$("#my_list li").delegate("input[type:checkbox]","change",function(){
    console.log("clicked");
});

$("#my_list > li > input[type=checkbox]").change(function(){
    console.log("clicked");
});

Upvotes: 0

Views: 1107

Answers (4)

Sid
Sid

Reputation: 371

Try this:

$('.my_list_checkbox').change(function(){
    console.log("clicked");
});

If you wish to go through the parent element, try $('#my_list").find('.my_list_checkbox').change(function(){ console.log("clicked"); });

In this scenario you can also try using .focusout() function if .change isn't working your way...

Upvotes: 1

Eswara Reddy
Eswara Reddy

Reputation: 1647

Try this

$("#my_list .my_list_checkbox").click(function(){
    console.log("clicked");
});

or

$("#my_list").on('click', ".my_list_checkbox",function(){
   console.log("clicked");
});

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

it should be

$("#my_list").on('change', "input[type=checkbox]",function(){
    console.log("clicked");
});

or

$("#my_list").on('change', ".my_list_checkbox",function(){
    console.log("clicked");
});

Upvotes: 1

Adil
Adil

Reputation: 148110

Use event delegation, As #my_list is parent of .my_list_checkbox and when ever element with class .my_list_checkbox is added to #my_list event is binding automatically.

$("#my_list").on("change", ".my_list_checkbox" ,function(){
    console.log("clicked");
});

Upvotes: 0

Related Questions