Question

我正在尝试在动态生成的切换按钮上添加事件侦听器。不同表格行中的每个按钮。

当页面上只有一个切换按钮时它工作正常，但是当有2个并且我点击第二个时，由于某种原因，事件目标仍然来自第一个按钮。

在函数returnы下面始终是页面上的第一个目标，而不是被点击的目标。

document.querySelector('body').addEventListener('click', function(evt) {
// Do some check on target
if ( evt.target.classList.contains('onoffswitch-checkbox') ) {
    // DO CODE
    var target = evt;
    console.log(target)
    console.log(target.path[2]);
  }
}, true); // Use Capturing

感谢您的想法如何避免这种情况。谢谢！

Answer 1

你的标签说jQuery，那么如下：

$(document).on('click', '.onoffswitch-checkbox', function(event) {
   console.log(this)
});

应该考虑动态生成的输入

Answer 2

在jsfiddle中检查了你的代码，我更改了第一个console.log以显示我点击了哪个元素，它直接显示了我点击了哪个范围

document.querySelector('body').addEventListener('click', function(evt) {
// Do some check on target
if ( evt.target.classList.contains('onoffswitch-checkbox') ) {
    // DO CODE
    var target = evt;
    console.log(target.toElement)
    console.log(target.path[2]);
  }
}, true); // Use Capturing

https://jsfiddle.net/0afef0Ln/2/

许多动态输入上的addEventListener总是返回第一个输入的目标

2 个答案: