jQuery函数执行多次

Question

我在SO上发现了类似的标题问题，但似乎没有一个与我的问题有关。

这一天一整天和大部分时间都让我疯狂。

首先，运行代码的样子：

接下来，我的代码的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>

// file: script2.js
function loadData() {
    $('#toggler').hover( 
        function() {
            $(this).css('cursor', 'pointer');
        },
        function() {
            $(this).css('cursor', 'text');
        });

    $('#toggler').click(function() {
        $('#stuff-container').toggle();
    });

    return false;
};
$('#form-container').submit(loadData);

/* file: style2.css */
#stuff-container {
    display: block;
}

而行为：

导航到index2.html

运行＃1：

点击按钮“让事情发生”
将鼠标悬停在“点击此按钮以切换资料”
- 光标变为手形
点击“点击此按钮切换东西”
“东西”正确切换。

运行＃2：
与以前一样，步骤1,2,3。

“东西” 没有切换。

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

例如，如果自页面重新加载后按钮被单击5次，当我执行上面的步骤2时， hover()的第一个.css()执行5次。

因此，如果按钮被点击任意次数，则toggle()调用无效。

问题：

我错过了什么（可能是非常基本的）概念？ 如何防止每个函数的多次执行？

Answer 1

这是因为$('#toggler').hover和$('#toggler').click()每次执行时绑定新的（ 附加的 ）事件处理程序。 每次按下按钮，然后执行loadData功能，就会执行这些操作。

所以，

首先运行，绑定悬停/单击处理程序（ 一个绑定处理程序 ）：运行正常
第二次运行，你绑定另一个悬停/点击处理程序（ 两个绑定处理程序 ）：问题因为第一个处理程序切换打开而第二个切换打开
第三次运行，....（ 三个绑定处理程序 ）：运行正常（但只是因为它打开/关闭/打开）

一般来说，它将在奇数运行上工作，在偶数运行时失败。

你应该只绑定一次。

解决方案是在重新绑定之前取消绑定

$('#toggler').off('mouseenter mouseleave').hover(...);
$('#toggler').off('click').click(...);

但这实际上取决于你想在loadData函数中做什么其他事情。

jQuery函数执行多次

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-02-04 09:07:11

jQuery函数执行多次

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-02-04 09:07:11

解决方案1
1 已采纳 2016-02-04 09:07:11