用jquery 绑定一个按钮click事件后，第一次点击后，一切正常，第二次点击，竟然执行两次，以后越来越多

最新推荐文章于 2021-06-08 11:05:49 发布

转载最新推荐文章于 2021-06-08 11:05:49 发布 · 3.3k 阅读

PHP全栈专栏收录该内容

4 篇文章

订阅专栏

本文探讨了使用jQuery时，click事件绑定次数递增的问题。解析了原因在于每次调用click方法时，都会在原有基础上添加新的函数，而不是替换。提供了解决方案：在重新绑定click事件前，先使用unbind方法移除所有click事件处理器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用jquery 绑定一个按钮click事件后，第一次点击后，一切正常，第二次点击，竟然执行两次，以后越来越多。

后来查看文档发现 jquery click 不是替换原有的function 而是接着添加，所以才会执行次数越来越多。

这有就可以在添加之前要先解除click事件绑定，然后再重新绑定。

重新绑定部分代码：

$('#btn').unbind('click');

$('#btn').bind('click', function(){

    alert('仅提示一次！');

});

原文地址 http://blog.youkuaiyun.com/wangzhe_90228/article/details/7642163

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

李柏成

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

03-jQuery-事件绑定【click() 、on()】、事件切换toggle()、事件方法、样式控制

记录java学习日常~

05-20

1万+

on() 方法是 jQuery 中最常用且最通用的事件绑定方法，可以绑定多个事件类型，并为每个事件类型指定一个或多个处理程序。click() 方法是一种简洁的事件绑定方法，只能绑定 click 事件，并且只允许绑定一个处理程序，无法为同一个元素绑定多个处理程序。off() 方法用于移除之前绑定的事件处理程序，它需要传递一个或多个事件类型参数，并为这些事件类型制定要移除的处理程序。jQuery 事件绑定中，on() 方法用于为元素添加事件处理程序，off() 方法则用于移除绑定的事件处理程序。

jquery网页刷新后控件失效_解决jQuery配UpdatePanel后第二次执行失效问题

weixin_39769187的博客

12-19

445

ASP.NET 本身提供的Ajax控件很好用，尤其是UpdatePanel控件应该是很常被使用到的控件之一，先不考虑UpdatePanel会使网页肥大的问题，UpdatePanel的确是可以让开发者很简单的做到异步效果。但是当在使用jQuery在UpdatePanel上的时后可能会发生以下情形...我已经绑定UpdatePanel内的Button做触发了，第一次执行是可以跑的，为什么第二次执行却没...

参与评论您还未登录，请先登录后发表或查看评论

html 未来元素绑定事件,jquery事件只绑定一次，未来新加的元素自动生效

weixin_39968640的博客

06-08

407

今天跟我们的前端同学讨论了页面html元素事件绑定方式，突然想到一个问题：jquery只绑定一次事件，未来新加的元素怎么生效，一直以为是用on绑定对未来新加的元素也会生效，今天试验一把，颠覆了我原来的观念，看来还是要实践出真知啊。下面我们看一个实例，效果是为ul的下面的所有li加上click事件。abcadd-lii = 1;$(function () {$("#btn").click(funct...

JQuery给一个元素绑定两次点击事件(第二次点击事件)

dongaokyamo7970的专栏

03-14

781

由于项目的要求，需要给复选框设置样式，初始样式：，第一次点击的时候显示，第二次点击时候需要改变该样式:。设计思路: 当点击次数为奇数时显示带有颜色的图片当点击次数为偶数时显示没有颜色的图片下边是我封装的一个函数; 转载于:https://www.cnblogs.com/ZM-O...

执行点击事件，第一次点击后，一切正常，第二次点击，执行两次，以此类推

Start2019

07-26

3118

今天执行点击事件的时候，第一个点击正常，第二次点击接口调用了两次，第三次点击接口调用了3次。。。。我还以为是我的push数组写错了，后来发现是因为jq绑定一个按钮click事件的问题。在点击事件上面添加了一行代码**$(’#btn’).unbind(‘click’);**问题就解决了 $('#btn').unbind('click'); $('#btn').bind('click', func...

jQuery实现radio第一次点击选中第二次点击取消功能

10-19

在本文中，我们将深入探讨如何使用jQuery来实现一个特定的功能：单选按钮（radio button）在第一次被点击时选中，而第二次点击时取消选中。通常情况下，单选按钮的默认行为是点击后保持选中状态，直到用户选择其他...

jQuery第一次运行页面默认触发点击事件的实例

10-18

第二个实例则选取所有同时拥有`aaa`和`bbb`类的元素中的第一个，并直接调用`.click()`方法进行点击。这些代码应当放置在合适的时机，比如`$(document).ready()`函数中，以确保在页面加载完毕时能执行预期的操作。 ...

jquery中交替点击事件toggle方法的使用示例

10-26

第二种，当提供参数时，`toggle` 方法可以绑定两个或多个函数，这些函数将在同一个事件下依次执行，实现函数间的交替行为。在使用带有参数的`toggle`方法时，参数是一组函数，每个函数都将在元素上发生的点击事件...

初学Js-一个按钮多次点击触发不同事件-事件编程

最新发布

07-29

<think>首先，用户的问题是关于jQuery的：如何在jQuery中绑定多个事件处理器函数以响应click事件。用户明确要求绑定多个click事件处理器。从系统级指令中，我需要： - 所有行内数学表达式使用$...$格式（但这里没有数学内容，所以可能不适用）。 - 独立公式使用$$...$$格式（同样，不适用）。 - LaTeX语法正确（但这里主要是代码，所以确保代码块正确）。 - 使用中文回答。 - 生成相关问题。 - 回答中引用的段落末尾自然地添加引用标识，例如[^1]。 - 回答结构清晰，帮助用户逐步解决问题，尽量保证回答真实可靠。用户提供的引用是关于jQuery事件绑定的： - 引用[^1]：解释了on()方法，可以绑定多个事件类型。 - 引用[^2]：详细描述了.on()方法的语法和用法，包括绑定多个事件处理函数。 - 引用[^3]：提到了.trigger()方法，但用户的问题是关于绑定，不是触发。用户的问题具体是：“我想在jQuery中绑定多个事件处理器函数以响应click事件的方法请问jQuery 绑定多个 click 事件处理器的方法” 所以，核心是绑定多个click事件处理器。从引用中： - on()方法可以用于绑定多个事件处理函数。 - 例如，引用[^1]说：on()方法可以绑定多个事件类型，并为每个事件类型指定一个或多个处理程序。 - 引用[^2]更详细：.on( events [, selector ] [, data ], fn ) 其中events可以是多个事件类型，但用户只关心click事件。绑定多个事件处理器到同一个事件（如click）： - 在jQuery中，可以为同一个元素绑定多个事件处理函数到同一个事件类型（如click）。当事件发生时，所有绑定的函数会按顺序执行。 - 方法包括： 1. 多次使用.click()方法。 2. 使用.on()方法多次绑定到"click"事件。 3. 使用.on()方法一次绑定多个处理函数，但.on()通常是为不同事件绑定不同处理函数；对于同一个事件绑定多个处理函数，需要多次调用。标准做法： - 使用.on()方法多次绑定不同的处理函数到同一个事件。 - 例如： ```javascript $('#myElement').on('click', function1); $('#myElement').on('click', function2); ``` - 或者使用.click()快捷方法： ```javascript $('#myElement').click(function1); $('#myElement').click(function2); ``` - 当元素被点击时，function1和function2都会执行。引用[^2]中提到：".on( events [, selector ] [, data ], fn )" 其中events可以是多个事件类型，但fn是单个函数。要绑定多个函数，需要多次调用.on()。引用[^1]说："on() 方法是 jQuery 中最常用且最通用的事件绑定方法，可以绑定多个事件类型，并为每个事件类型指定一个或多个处理程序。" 但这里的"多个事件类型"指的是不同的事件，如click和mouseover。对于同一个事件绑定多个处理函数，是通过多次绑定实现的。在jQuery中，事件处理是叠加的，不会覆盖（除非使用.on()时指定了不同的参数）。所以，回答应该包括： - 解释如何使用.on()绑定多个click事件处理函数。 - 提供代码示例。 - 确保回答清晰、逐步。结构回答： 1. 介绍问题：在jQuery中绑定多个事件处理器到click事件。 2. 解释方法：使用.on()方法多次绑定，或.click()多次。 3. 提供代码示例。 4. 讨论注意事项，比如执行顺序。 5. 结束时生成相关问题。生成相关问题： - 基于用户的问题，生成2-3个相关问题。 - 例如：如何移除事件绑定？事件委托的使用？等。引用标识： - 在回答中，如果引用提供的引用内容，在末尾添加[^1], [^2]等。 - 例如，解释on()方法时，引用[^1]和[^2]。用户提供的引用： - [^1]: on() 方法语法和说明。 - [^2]: 更详细的.on()语法和事件解绑。 - [^3]: .trigger()方法，不直接相关。我将主要引用[^1]和[^2]。最终回答用中文。</think>### jQuery 绑定多个 click 事件处理器的方法在 jQuery 中，为同一个元素绑定多个事件处理器函数以响应 click 事件，是一种常见需求。这可以通过多次调用事件绑定方法实现，所有绑定的处理器会按顺序执行。下面我将逐步解释具体方法，并提供代码示例。核心方法是使用 jQuery 的 `.on()` 或快捷方法 `.click()`，两者都支持叠加绑定。 #### 步骤 1: 理解绑定多个处理器的原理 - jQuery 的事件绑定机制允许为同一元素的同一事件类型（如 click）添加多个处理函数。 - 当事件触发时，处理器按绑定顺序依次执行。 - 使用 `.on()` 方法是最通用且推荐的方式，因为它支持事件委托和动态元素绑定[^1]。 - 引用说明：`.on()` 方法可以为同一事件类型绑定多个处理函数，触发时按顺序执行[^2]。 #### 步骤 2: 使用 `.on()` 方法绑定多个处理器 `.on()` 是 jQuery 的标准方法，语法为： ```javascript $(selector).on(event, [childSelector], [data], handler); ``` - **参数说明**： - `event`：事件类型，例如 `"click"`。 - `handler`：事件处理函数，可以是命名函数或匿名函数。 - `childSelector`（可选）：用于事件委托，指定子元素选择器。 - `data`（可选）：传递给处理函数的额外数据。 - **绑定多个处理器的代码示例**： ```javascript // 示例：为按钮绑定两个 click 事件处理器 $('#myButton').on('click', function() { alert('第一个处理器：按钮被点击了！'); }); $('#myButton').on('click', function() { console.log('第二个处理器：记录点击日志。'); }); ``` - 当用户点击 `#myButton` 时，先弹出警告框，再在控制台输出日志。 - 优点：`.on()` 方法灵活，支持事件委托（例如动态生成的元素）[^1]。 #### 步骤 3: 使用 `.click()` 快捷方法绑定多个处理器 `.click()` 是 `.on('click')` 的快捷方式，语法更简洁： ```javascript $(selector).click(handler); ``` - **绑定多个处理器的代码示例**： ```javascript // 示例：为同一个元素绑定多个 click 处理器 function handler1() { $(this).css('background-color', 'red'); // 点击后背景变红 } function handler2() { $(this).fadeOut(); // 点击后元素淡出 } $('#myElement').click(handler1); $('#myElement').click(handler2); ``` - 执行顺序：先执行 `handler1`（背景变红），再执行 `handler2`（淡出）。 - 注意：如果处理器中有 `return false;`，会阻止后续处理器执行（但通常不建议，除非需要中断事件）。 #### 注意事项 1. **执行顺序**：处理器按绑定顺序执行，后绑定的不会覆盖先绑定的[^2]。 2. **事件委托**：如果需要为动态添加的元素绑定事件，使用 `.on()` 的 `childSelector` 参数： ```javascript // 示例：事件委托（父元素处理子元素的点击） $('#parent').on('click', '.child', function() { alert('子元素被点击了！'); }); ``` 3. **性能优化**：避免过度绑定，以免影响页面性能。必要时使用事件解绑（如 `.off()`）[^2]。 4. **兼容性**：所有现代 jQuery 版本（≥1.7）支持此方法。 #### 完整示例 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery 多事件处理器示例</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <button id="demoBtn">点击我</button> <script> $(document).ready(function() { // 绑定第一个处理器 $('#demoBtn').on('click', function() { alert('第一个处理器：按钮被点击！'); }); // 绑定第二个处理器 $('#demoBtn').click(function() { console.log('第二个处理器：点击日志已记录。'); }); }); </script> </body> </html> ``` - 运行效果：点击按钮后，先弹出警告框，再在控制台输出日志。 ### 相关问题 1. 如何解绑 jQuery 中的多个事件处理器？[^2] 2. jQuery 事件委托（Event Delegation）的工作原理和实际应用场景是什么？[^1] 3. 在 jQuery 中，如何触发事件（如模拟点击）而不实际点击元素？[^3] [^1]: on() 方法是 jQuery 中最常用且最通用的事件绑定方法，可以绑定多个事件类型，并为每个事件类型指定一个或多个处理程序。以下是 on() 方法的语法： $(selector).on(event, childSelector, data, handler); selector：需要绑定事件的元素，可以是任何选择器。event：要绑定的事件类型，如 "click"、"mouseover"、"keydown" 等。childSelector（可选）：子选择器，如果指定了子选择器，则只有子元素触发该事件才会执行处理程序。data（可选）：传递给事件处理程序的额外数据。handler：事件触发后要执行的函数，可以是预定义函数、匿名函数或命名函数。 [^2]: jQuery绑定事件处理器。该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时，JQ会按照绑定的先后顺序依次执行绑定的事件处理函数。 .on( events [, selector ] [, data ], fn ) events:一个或多个用空格分隔的事件类型和可选的命名空间，如”click“或”keydown.myPlugin” 。selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的null或省略，当它到达选定的元素，事件总是触发。data:当一个事件被触发时要传递event.data给事件处理函数。fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。 [^3]: jQuery常用的绑定事件处理器方法。2、.trigger( event ) event: 一个jQuery.Event 对象. 当相应的事件发生时，任何通过.on()或一个快捷方法绑定的事件处理程序将被触发。但是，它们可以用.trigger()方法手动触发。调用 .trigger() 执行处理程序和用户自然的触发该事件，他们的执行顺序时相同的：。