jQuery 更改事件不適用於復選框

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>

我可以看到復選框正在更改它的 state，但更改事件不起作用。 我也嘗試過（'change'）和點擊事件——它們也不起作用。 順便說一句，我正在使用materializecss。

Answer 1

把它放在文件里面准備好

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

Answer 2

需要調用下面的 jQuery 方法來工作代碼

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

或者

$(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>