jQuery change event is not working with checkbox

Question

<tr>
  <td class="large-width">
    <p>
      <label>
        <input type="checkbox" id="checkbox" ${todo.isCompleted ? 'checked="checked"' : ''} />
        <span class="text">${todo.item}</span>
      </label>
    </p>
  </td>
</tr>

<script>
   $('#checkbox').change(function(){
     console.log('something');
   });
</script>

I can see that checkbox is changing it's state, but Change event is not working. I also tried on('change') and click events - they're not working either. By the way, I'm using materializecss.

Yes.Now, I tried in JSFiddle and it works. But in my project it's not working. Seems like I'm missing something out. — snvk3, Jul 12 '20 at 08:23

AKT · Answer 1 · 2020-07-12T08:03:17.147

1

Keep it inside document ready

<script>
$(function(ready){
   $('#checkbox').change(function(){
     console.log('something');
   });
});
</script>

edited Jul 12 '20 at 08:03

answered Jul 12 '20 at 07:59

AKT

942
6
16

score 1 · Accepted Answer · answered Jul 12 '20 at 08:03

Need to call below jQuery methods to working code

$(document).ready(function(){ // jQuery methods go here... });

OR

$(function(){ // jQuery methods go here... });

<tr>
  <td class="large-width">
    <p>
      <label>
        <input type="checkbox" id="checkbox" ${todo.isCompleted ? 'checked="checked"' : ''} />
        <span class="text">${todo.item}</span>
      </label>
    </p>
  </td>
</tr>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>$(document).ready(function(){
   $('#checkbox').change(function(){
     console.log('something');
   }); });
</script>

The second is preferred since the first is now deprecated – charlietfl Jul 12 '20 at 12:27 — charlietfl, Jul 12 '20 at 12:27

jQuery change event is not working with checkbox

2 Answers2