capture change event inside tr not working for custom checkbox

Question

I have table with rows having checkbox inside. I want to have change event on these checkboxes. Also there has to be a click listener on table row .

Now I have click listener on tr and change listener on input , but when input is changed, it first fires click listener on tr and then change on input .

It should rather capture change listener only. How can I fix this ?

Here is the code -

<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');
 });

here is demo DEMO 1

Answer 1

Add a blank click event to label with stopPropagation() .

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

DEMO