BootStrap Switch added with javaScript doesn't fire events

Question

EDITED, go below

I have a table and it has a row click event for each row. The problem is that I've added a switch in the last column ("BootstrapSwitch") and that switch doesn't trigger neither state change or click event because the row click event overlaps it. I know the event works because it does if I place the switch in any other place.

Is there anyway to have the row event in all the row but one column?

// Switch event
$('[name="my-checkbox"]').on('switchChange.bootstrapSwitch',  function(event, state) {
  console.log(this); // DOM element
  console.log(event); // jQuery event
  console.log(state); // true | false
});

// row click
$(document).on('click','.rowDev', function(e) {
    e.preventDefault();
    // more code
});

EDIT

The answer provided should help me but I noticed another problem. Firing event problem. Appended switches to the table with JScript and the initialization maybe don't work, because any of the switches added dynamically work, just those I add manually on .html

This is the row I add to the table

"<td><input class='make-switch' type='checkbox' name='my-checkbox' "+ (!anyUnattendedAlert?"checked ":"")+"data-on-color='success' data-off-color='danger' data-on-text='Si' data-off-text='No'>" +
                                    "</td>"+

and when all rows are added

$("[name='my-checkbox']").bootstrapSwitch();

also tryed to initialize each row I add. I've been trying in others tables I had without row event and still not firing the switch event (event provided in comments below).

Still dont know how to add those switches and initalize them to work.

P.D:css and js works because switches added manually trigger events.

Thanks

Answer 1

You can solve this by calling stopPropagation() on the click event which fires on the Bootstrap Switch control. This will stop the event bubbling up the DOM and firing on the parent .rowDev:

$('[name="my-checkbox"]').on('click', function(e) {
  e.stopPropagation();
});

Note that you can also join the two event handlers together in one on() call if you prefer:

$('[name="my-checkbox"]').on({
  'switchChange.bootstrapSwitch': function(e, state) {
    console.log(this); // DOM element
    console.log(e); // jQuery event
    console.log(state); // true | false
  }, 
  'click': function(e) {
    e.stopPropagation();
  }
});