CODEWITHSUNDEEP
jquerycheckboxonclickonchange
Dird
Dird

Reputation: 325

why is my checkbox.change not working (jquery)?

I've done similar things before, click a checkbox then do something (.parent() etc) but for some reason it's not registering this time. Can anyone see why?

$.each( email_list, function( key, value ) {
$("#email_span").after("<tr><td><input type='checkbox' name='member' checked='checked' onclick='check_change(this);' /></td><td>" + value.name + "</td><td>" + value.email + "</td></tr>");
$("#emails").prepend(value.email + ";");
});

$('.member').change(function() {
   alert ("FECK");
   if(this.checked) {
   }
});

It is all within the $(document).ready block. I've got it working with a function call but was curious why the jQuery .change wasn't working?

Upvotes: 12

Views: 46631

Answers (8)

Arash.Zandi
Arash.Zandi

Reputation: 1597

You shoud use this way :

$('body').on('change', 'input[type=checkbox]',function (e) {
//what ever you wanna do
});

(Because google search shows this page for another issues It make sense to explain more)

And If you want to check and uncheck programmatically with raising change event you should add .change() at the end of lines like these :

$('checkboxGroups').prop('checked', true).change();
$('checkboxGroups').prop('checked', false).change();

Upvotes: 3

Utk
Utk

Reputation: 1

Try adding such scripts inside:

$(document).ready(function () {});

function.

Upvotes: -2

Harry S.
Harry S.

Reputation: 161

If the element has the 'change' event bound and if you need to fire the 'change' event after changing the checkbox property you can use the alt workaround below:

If you want to check:

$('#MyCheckbox input:checkbox').prop('checked', false).click();

If you want to uncheck:

$('#MyCheckbox input:checkbox').prop('checked', true).click();

Summary

it's using a reverse process. for the first one it will make sure the checkbox property is NOT checked, then it will trigger the click which will change the checkbox property to 'checked' then it will fire the 'change' event - if it's bound.

Upvotes: 13

Martin M
Martin M

Reputation: 465

You are binding the 'change' listener inside your $.each loop.. Maybe just make the change listener more specific like:

$('#email_span').on('change', '.member', function(){ 
    console.log('you hit it'); if($(this).prop('checked')){
    console.log('it\'s checked');
  } 
});

Upvotes: 0

Irvin Dominin
Irvin Dominin

Reputation: 30993

For dynamically created element you have to use event delegation, if you want to select by an attribute you can use an attribute equals selector.

Code:

$(document).on("change", "input[name='member']", function () {
    alert("FECK");
    if (this.checked) {}
});

Demo: http://jsfiddle.net/2fepaf0y/

Upvotes: 47

Kartikeya Khosla
Kartikeya Khosla

Reputation: 18873

Give your checkboxes a class say 'check' and then try event delegation as shown below :-

$(document).on('change','.check',function() {
   alert ("FECK");
  if(this.checked) {
   alert ("checked");
  }
});

OR

$(document).on('change','input[name="member"]',function() {
   alert ("FECK");
  if(this.checked) {
   alert ("checked");
  }
});

Upvotes: 1

vikrant singh
vikrant singh

Reputation: 2111

Delegate the change event

$("tr").on("change","input[name='member']",function(){
alert ("FECK");
   if(this.checked) {
    //do other stuff
   }
})

Upvotes: 0

antyrat
antyrat

Reputation: 27765

You are using class selector, but you don't have class called .member. You need to use attribute equal elector instead:

$('input[name=member]').change...

Upvotes: 1

Related Questions