1

已编辑，请往下看

我有一个表，每行都有一个行点击事件。问题是我在最后一列（“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();

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

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

PD:css 和 js 之所以有效，是因为添加了手动触发事件的开关。

谢谢

4

1 回答 1

5

您可以通过调用stopPropagation()在 Bootstrap Switch 控件上触发的click事件来解决此问题。这将阻止事件冒泡 DOM 并在 parent 上触发.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();
  }
});
于 2017-02-09T10:13:55.387 回答