BootStrap 添加了 javaScript 的开关不会触发事件

Question

已编辑，往下看

我有一个 table，它的每一行都有一个行点击事件。问题是我在最后一列 ("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 将开关附加到 table 并且初始化可能不起作用，因为动态添加的任何开关都有效，只有我在 .html

上手动添加的开关

这是我添加到 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>"+

并且添加所有行后

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

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

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

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

谢谢

Answer 1

您可以通过在 click 事件上调用 stopPropagation() 来解决此问题，该事件在 Bootstrap 开关控件上触发。这将阻止事件冒泡 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();
  }
});

BootStrap 添加了 javaScript 的开关不会触发事件

BootStrap Switch added with javaScript doesn't fire events

html

javascript

jquery

bootstrap-switch