JSFiddle 不管理函数内的点击事件

Question

我有一个非常简单的 JSFiddle

HTML

<input type="button" value="Submit" id="myBtn" onclick="foo()">

JS

function foo(){
    console.log('click');

  $("#myBtn").click(function(event) {
    console.log('click2');
  });

    console.log('click3');

}

这是 link：https://jsfiddle.net/mdvyo481/

我已经在 No Wrap - Head 模式下加载了脚本。奇怪的是，当我单击该按钮时，click 和 click3 会打印在控制台中，但 click2 不会打印。如果我再次点击它，我会打印 2 张 click2。

看起来 event 在 fiddle 中没有得到妥善管理。有办法解决吗？

Answer 1

这是正确的行为。发生这种情况的原因是因为您在调用 foo 函数时绑定了事件 click。第一次调用 foo 时绑定事件，第二次再次绑定，依此类推。绑定事件不会删除之前的绑定，因此如果您单击 submit 10 次，您将绑定 10 个不同的 click 事件处理程序，它们都做同样的事情，您将收到 'click2'在控制台中 10 次。

Answer 2

使用 jquery 或使用 onclick 属性在您的按钮上添加点击处理程序，但不能同时使用。

我提供了两个示例来说明这一点：

function foo(element) {
  console.log(element.id + ' was clicked <- onclick attribute handler')
}


$("#myBtn").click(function(event) {
  console.log(event.target.id + ' was  clicked, <- jQuery handler')
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" value="Submit" id="myBtn" onclick="foo(this)">

您的示例不起作用的原因是您仅在调用 foo() 后才设置 jquery 点击处理程序，因此它不会触发。

JSFiddle 不管理函数内的点击事件

JSFiddle does not manage click events inside a function

javascript

jsfiddle