Javascript 多次执行jQuery函数_Javascript_Jquery_Html_Css

Javascript 多次执行jQuery函数

javascript jquery html css

Javascript 多次执行jQuery函数,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我发现了一些标题类似的问题，但似乎都与我的问题无关这件事让我整天整夜发疯首先，运行的代码是什么样子的：接下来，我的代码的MCV版本： <!DOCTYPE html>  <html> <head> <link rel="stylesheet" href="css/style2.css"> </head> <body> <form id

我发现了一些标题类似的问题，但似乎都与我的问题无关

这件事让我整天整夜发疯

首先，运行的代码是什么样子的：

接下来，我的代码的MCV版本：

<!DOCTYPE html>
<!-- file: index2.html -->
<html>
<head>
    <link rel="stylesheet" href="css/style2.css">
</head>
<body>
    <form id="form-container">
        <button id="submit-btn">Make things happen</button>
    </form>
    <div id="toggler">Click this to toggle Stuff</div>
    <div id="stuff-container">
        Stuff
    </div>
    <script src="js/libs/jquery.min.js"></script>
    <script src="js/script2.js"></script>
</body>
</html>

/*文件：style2.css*/
#填充容器{
显示：块；
}

行为：

导航到index2.html

运行#1：

点击“使事情发生”按钮

将鼠标悬停在“单击此按钮切换内容”
--光标变为手形

单击“单击此按钮切换内容”

“Stuff”切换正确运行#2:
步骤1、2、3与前面一样

“Stuff”不会切换使用

console.log（）

调用，我发现如果多次单击“使事情发生”按钮，script2.js中的每个函数都会执行多次

e、例如，如果在页面重新加载后按钮被单击了5次，当我执行上述步骤2时，

hover（）

中的第一个

.css（）

将执行5次

因此，如果该按钮被单击了偶数次，则

toggle（）

调用无效

问题是：

我遗漏了什么（可能是非常基本的）概念？

如何防止每个函数的多次执行？

这是因为

$（“#toggler'）。悬停在和$（“#toggler'）。单击（）
在每次执行时绑定新的（附加）事件处理程序。每次按下按钮时都会执行这些操作，该按钮依次运行loadData
功能
所以

第一次运行时，绑定悬停/单击处理程序（一个绑定处理程序）：运行正常
第二次运行时，绑定另一个悬停/单击处理程序（两个绑定处理程序）：问题是因为第一个处理程序打开，而第二个处理程序关闭
第三次运行，。。。。（三个绑定处理程序）：运行良好（但仅因为它被切换为开/关/开）

一般来说，它会在奇数运行时工作，在偶数运行时失败
你应该只绑定一次

解决方法之一是在重新绑定之前解除绑定
$('#toggler').off('mouseenter mouseleave').hover(...);
$('#toggler').off('click').click(...);

但这实际上取决于您想在loadData
函数中执行的其他操作。
您能创建一个JSFIDLE代码并共享它吗？每次运行loadData
，您都会将一个函数附加到点击和悬停事件。将函数多次附加到事件会触发事件，触发事件的次数与附加事件的次数相同。函数.hover（）
和.click（）
将eventhandler应用于您按钮，因此您应该只将这些eventhandler定义到元素一次，而不是多次。例如，您可以在页面完成加载后应用EventHandler。看看@Rayu：我试图创建一个小提琴，但它产生了一个错误（“请使用POST请求”），所以我没有保存它。尽管有错误，可能应该保存它。感谢所有回答或评论的人！