CODEWITHSUNDEEP
javascriptjquery
leshank
leshank

Reputation: 113

Can't detect checkbox change when adding on document load

I'm a little stuck on this. I have a javascript function that, on page load, generates a form:

All the checkboxes have the class 'cls-select'. I am trying to then run another function (I've put a console.log in for now) when any of these checkbox states are changed but it's not detecting any changes. 

$(function() {
  FormGenerate();

  $('.cls-select').change(console.log('Something changed...'));
  // ...
});

When the page is first opened, the log message appears. But, no matter what is checked / unchecked, no additional log entries appears.

Can some one explain to me why this occurs? I'm guessing it's because when the .js file is loaded by the browser, there are no checkboxes with cls-select that exist on the page so there is nothing 'there' to fire the trigger.

Is there a way around this without having to start over? Any help / advice is greatly appreciated.

Upvotes: 0

Views: 81

Answers (3)

Gautam
Gautam

Reputation: 3384

There is a problem in your code you should do like this

$(function() {
   FormGenerate();

   $('.cls-select').change(function(){
    console.log('Something changed...');
   });

});

Upvotes: 0

Alex Todef
Alex Todef

Reputation: 370

I think it happens because when you trying to set 'onchange' event for checkboxes, they didn't appear yet. So you should use jQuery 'on' like this:

$( 'body' ).on( 'change', '.cls-select', function() {
  console.log('changes!');
});

Upvotes: 0

Claudio Redi
Claudio Redi

Reputation: 68410

Your logic is assigning the result of console.log('Something changed...') execution as event handler and that's not what you are expecting to do.

Change your code by

$('.cls-select').change(function(){
    console.log('Something changed...');
});

Upvotes: 2

Related Questions