javascript - 添加了 javaScript 的 BootStrap Switch 不会触发事件

Question

已编辑，往下看

我有一个表，它的每一行都有一个行点击事件。问题是我在最后一列(“BootstrapSwitch”)中添加了一个开关，并且该开关不会触发状态更改或点击事件，因为行点击事件与它重叠。我知道该事件有效，因为如果我将开关放在任何其他位置，它就会有效。

除了一列之外，所有行都有行事件吗？

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

编辑

提供的答案应该对我有帮助，但我注意到另一个问题。触发事件问题。使用 JScript 将开关附加到表中并且初始化可能不起作用，因为动态添加的任何开关都有效，只有我在 .html 上手动添加的开关

这是我添加到表中的行

"<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>"+

当所有行都添加完毕

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

还尝试初始化我添加的每一行。我一直在尝试在没有行事件的其他表中，但仍然没有触发切换事件(事件在下面的评论中提供)。

仍然不知道如何添加这些开关并初始化它们以使其工作。

P.D:css 和 js 可以工作，因为手动添加的开关会触发事件。

谢谢

Answer 1

您可以通过在 Bootstrap Switch 控件上触发的 click 事件上调用 stopPropagation() 来解决此问题。这将阻止事件冒泡 DOM 并在父 .rowDev 上触发:

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

请注意，如果您愿意，也可以在一个 on() 调用中将两个事件处理程序连接在一起:

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