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：

点击按钮＆＃34;让事情发生＆＃34;
将鼠标悬停在＆＃34;点击此按钮切换Stuff＆＃34;
- 光标变为手
点击＆＃34;点击此按钮切换Stuff＆＃34;
＆＃34;东西＆＃34;正确切换。

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

＆＃34;东西＆＃34; 不切换。

使用console.log()调用，我发现script2.js中的每个函数都执行多次，如果＆＃34;发生事情＆＃34;按钮已被多次单击。

.css()

hover()

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

问题：

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

Answer 1

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

所以，

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

一般情况下，它会对奇数运行起作用，对偶数运行失败。

你应该只绑定一次。

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

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

但这实际上取决于你想在loadData函数中做些什么。

jQuery函数执行多次

1 个答案: