简介
jquery-once 是一个基于 jQuery 的插件，用于限制事件处理程序的执行次数。当页面中存在多个相同元素时，通常会出现事件处理程序被多次调用的问题。使用 jquery-once 可以很方便地解决这个问题。
安装
首先需要确保已经安装了 Node.js 和 npm。然后在终端中运行以下命令进行安装：
npm install jquery-once
使用
- 引入 jquery-once 插件
在 HTML 文件中引入 jQuery 和 jquery-once 插件：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="./node_modules/jquery-once/jquery.once.js"></script>
- 添加类名
在需要限制事件处理程序执行次数的标签上添加 class 属性，并指定一个唯一的类名。例如：
<button class="my-btn btn-once">Click me</button>
- 绑定事件处理程序
使用 jQuery 的 on() 方法来绑定事件处理程序：
$('.btn-once').once('click', function() {
console.log('Button clicked.');
});注意，在事件处理程序中不应该再次调用 once() 方法。
- 示例代码
下面是一个完整的示例：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------ ----------
------- -----------------------------------------------------------
------- ---------------------------------------------------------
-------
------
------- ------------- --------------- -----------
--------
---------------------------- ---------- -
------------------- -----------
---
---------
-------
-------总结
使用 jquery-once 插件可以很方便地解决事件处理程序被多次调用的问题。只需要在需要限制事件处理程序执行次数的标签上添加一个唯一的类名，并使用 jQuery 的 on() 方法来绑定事件处理程序即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/38894