JS func中的JQuery func越来越多地执行[重复]答案

【问题标题】：JQuery func inside JS func executed increasingly [duplicate]JS func中的JQuery func越来越多地执行[重复]
【发布时间】：2018-05-16 02:33:35
【问题描述】：

为什么每次单击 javascript 函数中的 jQuery 函数都会越来越多地触发它？点击足够多的次数，每次点击执行 100 次以上。

<div class="clickity" onclick="funky()">Test</div>

var x = 0;

function funky(){
    $('.clickity').on('click', function(){
        x += 1;
        alert(x);
    });
};

JsFiddle我只是好奇为什么会这样。

【问题讨论】：

从函数声明语句中删除onclick="funky()"并解开$('.clickity').on('click', fn)。

标签： javascript jquery

【解决方案1】：

jQuery 中的 addEventListener 又名 on 具有累积方面。您不是通过替换旧的来分配它，而是添加一个新的并保留以前的处理程序链。

【讨论】：

【解决方案2】：

您正在将类 Javascript Onclick HTML 属性与 jquery 结合起来。

第一轮

用户点击点击率
一个。由于 HTML 属性 onclick 调用 funky
funky 将监听器附加到 clickety。
注意 funky 在第一次点击时没有增加 x。

下一轮

用户点击点击率
一个。由于 HTML 属性 onclick 调用 funky
乙。 x 增加 1，因为 jquery 事件侦听器在第一轮附加到 clickety
funky 将监听器附加到 clickety

未来几轮

用户点击点击率
一个。由于 HTML 属性 onclick 调用 funky
乙。 x 增加 1，因为 jquery 事件侦听器在第一轮附加到 clickety
c。 x 增加 1，因为 jquery 事件侦听器在第二轮附加到 clickety
funky 将监听器附加到 clickety

【讨论】：

【解决方案3】：

我不明白，为什么要在函数中插入监听器？每次单击时，都会向按钮添加一个新的侦听器。每次单击都会执行增量并添加一个新的侦听器。

【讨论】：

我正在为 onclick="func(id)" 分配一个 ID，并在我的 jquery $('.class'+id) 中使用该 ID。为了避免每次单击或将鼠标悬停在一个元素上运行数百次只是为了找到一个数字时运行一个 for 循环，将不得不找到一个更好的解决方案 :)

【解决方案4】：

因为每次点击clickity，都会调用funky方法并在clickity上注册一个新的事件监听器。您正在混合两种方法，要么这样做：

var x = 0;

function funky(){
    x += 1;
alert(x);
};

&lt;div class="clickity" onclick="funky()"&gt;Test&lt;/div&gt;

或

var x = 0;

$('.clickity').on('click', function(){
    x += 1;
alert(x);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clickity" >Test</div>

【讨论】：