内部の変更イベントをキャプチャしてカスタムチェックボックスで作業しない

Question

テーブルにチェックボックスがあるテーブルがあります。私はこれらのチェックボックスでイベントを変更したい。また、テーブル行にクリックリスナーが存在する必要があります。

今私はtrにリスナーをクリックして、input上のリスナーを変更するが、入力が変更された場合、その最初の火災はtrにリスナーをクリックし、inputに変化しています。

リスナーのみではなく、changeをキャプチャする必要があります。これをどうすれば解決できますか？ここ

<table class="table table-hover category-select" id="cat-table"> 
    <thead> 
    <tr> 
     <th>#</th> 
     <th></th> 
     <th>Category Name</th> 
     <th>Unit</th> 
     <th class="text-center">Edit</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr class="selected"> 
     <td>1</td> 
     <td>3</td> 
     <td>Steel</td> 
     <td>Tonnes</td> 
     <td class="text-center"> 
     <label class="switch switch-green"> 
      <input type="checkbox" class="switch-input" /> 
      <span class="switch-label" data-on="Active" data-off="Inactive"></span> 
      <span class="switch-handle"></span> 
     </label> 
     </td> 
    </tr> 
    <tr> 
     <td>2</td> 
     <td>4</td> 
     <td>Cement</td> 
     <td>Bags</td> 
     <td class="text-center"> 
     <label class="switch switch-green"> 
      <input type="checkbox" class="switch-input" /> 
      <span class="switch-label" data-on="Active" data-off="Inactive"></span> 
      <span class="switch-handle"></span> 
     </label> 
     </td> 
    </tr> 

    </tbody> 
</table> 


$catBody.on('click', 'tr', function(e) { 
    alert('in tr'); 
}); 

$catBody.on('change', 'input', function(e) { 
    e.stopPropagation(); 
    alert('in input'); 
}); 

デモ​​

Answer 1

stopPropagation()で標識するために空白のクリックイベントを追加している - ここで

はコードです。

$catBody.on('click', 'label', function(e) { 
    e.stopPropagation(); 
}); 

DEMO