时间戳

首页 > 解决方案 > JSFiddle 不管理函数内的点击事件

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

问题描述

我有一个非常简单的 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');

}

这是链接：https ://jsfiddle.net/mdvyo481/

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

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

标签： javascriptjsfiddle

解决方案

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

推荐阅读