jquery click 多次绑定,多次触发,怎么清除历史绑定事件

JavaScript生存指南:DOM操作、事件循环与真实工程陷阱 JavaScript 是一种运行在浏览器中的动态、单线程、事件驱动的脚本语言,其核心机制围绕执行上下文、原型链、隐式类型转换和事件循环展开。理解 `==` 与 `===` 的差异、`[] == ![]` 的转换逻辑,本质是掌握 JS 运行时类型 coercion 协议;而 `DOMContentLoaded` 与 `load` 的区别,则直指 DOM 渲染生命周期的关键分界。这些底层行为深刻影响首屏性能(如 FCP)、表单交互健壮性及跨端兼容性。本文从真实故障案例切入,解析 DOM 操作代价、微任务队列调度 阅读详情

          最近在用jquery对一个页面超链接元素进行click事件绑定,绑定调用方法如下:

function OpenUrl(url){ 
	$("a[rel='xggl']").click(function () {
	   window.open(url,"_blank");
 	}
}

第一次点击超链接,一切正常,第二次点击超链接,竟然打开两个窗口,再次打开,打开的窗口越来越多,怎么回事呢?

显然,click事件是append 的 而不是replace。抓紧翻阅jquery的api【http://visualjquery.com/】,很幸运找到了一个函数unbind,代码修改如下:

function OpenUrl(url){ 
        $("a[rel='xggl']").unbind('click');
	$("a[rel='xggl']").click(function () {
	   window.open(url,"_blank");
 	}
}

再次运行程序,一切ok!!!!


Web App工程本质:OPOA架构与移动端兼容性实战 单页应用(SPA)的核心在于构建可预测的UI状态机,其底层逻辑源于对多页应用(MPA)白屏延迟与体验割裂的系统性优化。通过路由驱动、异步数据流解耦、局部DOM更新与事件委托等关键技术,前端得以在浏览器渲染管线约束下实现高性能交互。尤其在Android 4.4、iOS 8等碎片化环境中,hashchange路由、自研Scroller、Canvas轻量动画、CSS命名空间响应式等方案,直击物理层瓶颈与内核兼容性陷阱。这些实践不仅支撑了早期OPOA范式落地,更持续映射至现代框架的嵌套路由、状态持久化与WebVie 阅读详情

相关推荐

JavaScript高手的三大核心能力:语言内核、运行环境与业务决策

JavaScript作为动态、单线程、基于事件循环的脚本语言,其真实复杂性远超语法层面——它在V8引擎中执行,在浏览器渲染管线中影响像素输出,并深度耦合于网络、内存与兼容性等运行时环境。理解执行上下文、this绑定机制、闭包作用域链及微任务调度原理,是构建稳定异步逻辑的基础;掌握渲染管线中的强制同步布局、内存分代回收(新生代/老生代)及GC触发条件,才能实现高性能前端体验;而将技术能力映射到业务场景,需具备需求解构力、方案权衡力与风险预判力。本文聚焦JavaScript高手必备的三大支柱:语言内核的条件反射

as2886089的博客 420

jquery 事件 多次绑定,多次触发,怎么清除历史绑定事件

为什么80%的码农都做不了架构师?>>> ...

weixin_33970449的博客 627

前端面试题汇总

总结了一下之前面试遇到的问题,方便自己也方便他人

annier_11的博客 150

html 解决click事件多次点击时,清除之前状态

关于click事件绑定目前掌握了以下几种方法: 1. $(".choose").click(function () {}); 在页面中为一个元素绑定事件,事件执行后页面未刷新且元素还在,然后你再次点击,元素又被绑定个一次点击事件,这样第二次点击就会执行两次,以此类推。 为解决上述问题,可采用下面"one"方法 2. $(".choose").one("click", function () {});-只绑定一次事件 如何解决累加绑定: 使用jquery的one()方法,为元素绑定一个一次性的事件

qq_42376090的博客 1523

手把手教你用思岚RPLIDAR C1激光雷达实现简单环境扫描(树莓派4B+Ubuntu22.04)

本文详细介绍了如何在树莓派4B(Ubuntu 22.04系统)上驱动思岚RPLIDAR C1激光雷达,从硬件连接、权限配置、SDK编译到运行示例程序,最终实现环境扫描数据的可视化。通过手把手教程,帮助开发者和爱好者快速上手激光雷达应用,构建简单的环境扫描图。

j2k3l4的博客 1130

Win10文件夹只读属性自动恢复?彻底解决方法解析

Win10文件夹只读属性自动恢复?彻底解决方法解析在Windows系统使用过程中,文件权限管理常会遇到棘手问题。最近多位用户反馈:取消文件夹只读属性后,系统却自动恢复该设置,导致无法正常复制或修改文件。本文将深入分析该现象的产生原因,并提供多种解决方案,帮助开发者彻底摆脱权限困扰。

mmoo_python的博客 7520

jquery 调用 click 事件 的 三种 方式

第一种方式: [javascript] view plain copy $(document).ready(function(){     $("#clickme").click(function(){          alert("Hello World  click");     });   第二种方式:

tasty 877

零基础学simulink仿真建模--基于Simulink进行农业机械用开关磁阻电机的仿真建模

特点结构简单:无电刷、换向器等易损件,维护成本低。坚固耐用:适合恶劣的工作环境,如农业机械作业现场。宽调速范围:通过适当的控制策略可以实现较宽的速度调节范围。挑战非线性特性:SRM的电磁特性和转矩特性具有高度非线性。复杂性:涉及电气、机械动力学以及控制系统的设计与集成。实时性要求:需要快速响应以适应不断变化的操作条件。多变量优化:包括电流控制、速度控制等多个方面需综合考虑。使用Simscape Electrical库来构建一个开关磁阻电机模型。

amy_mhd的博客 909

JQuery触发Click事件几种方法、处理表单提交

JQuery触发a标签的click事件 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>测试</title&g...

qiudechao1的博客 6255

基于PCIE8311+FPGA+TMS320F28335 PCIE应用项目开发板PROTEL99设计硬件(原理图+PCB)文件

基于PCIE8311+FPGA+TMS320F28335 PCIE X1应用项目开发板PROTEL99设计硬件(原理图+PCB)文件,Protel 99se 设计的项目工程文件,包括原理图及PCB印制板图,可用Protel或 Altium Designer(AD)软件打开或修改,都已经制板在实际项目中使用,可作为你产品设计的参考。

GJZGRB的博客 577

博途 V16(TIA portal V16)安装教程

本文提供了西门子TIA Portal V16软件的完整安装指南。内容包括百度网盘下载链接(提取码kv69)、详细安装步骤(关闭安全保护、典型安装设置)、授权破解方法,以及PLCSIM仿真功能的使用说明。重点演示了S7-1200 PLC程序的仿真过程,解析了仿真界面各元素功能,包括状态指示灯(RUN/STOP/ERROR)、操作按钮(RUN/STOP/MRES)和网络接口状态等。通过图文并茂的方式,完整呈现了从软件安装到PLC程序仿真的全流程操作。

lingchen1906的博客 6699

移除jQuery绑定的click历史事件

事件原由:function promptImage(obj,callback){ console.log(obj.a) $('#showImage').modal({backdrop:false}).on('hidden.bs.modal', function (e) { $('#showImage').modal('hide') }) .find('.submit').c...

weixin_34006965的博客 91

秋招突击——笔试整理——8/25——拼多多笔试整理

继续加油! 转变思维,有简单到复杂,由直观到抽象,这种贪心模拟的题目一直是这样的!

Blackoutdragon的博客 2400

关于点击事件只执行一次的问题

因为点击事件的原型也是还回的数据,所以要绑定在body上面。 // $("#w_tagPage a[wid]").click(function(){ $("body").on('click','#w_tagPage a[wid]',function(){ $(this).addClass("w-active")....

weixin_30856965的博客 1179

【100%通过率】华为机试真题 Python 实现【对称美学】【2022.11 Q4 新题】

对称就是最大的美学,现有一道关于对称字符串的美学。 已知: 第1个字符串:R 第2个字符串:BR 第3个字符串:RBBR 第4个字符串:BRRBRBBR 第5个字符串:RBBRBRRBBRRBRBBR相信你已经发现规律了,没错! 就是第i个字符串=第i-1号字符串的取反+第i-1号字符串。取反即(R->B,B->R); 现在告诉你n和k,让你求得第n个字符串的第k个字符是多少。(k的编号从0开始)

MISAYAONE的博客 1万+

windows使用jupyter notebook读取文件路径的几种方法和设置默认打开路径

简单分享小虎这段时间以来学到的jupyter notebook操作技巧。

狂小虎/Anthony Dave的博客 KuangXiaoHu's Blogs 1万+

jQuery数据缓存系统:DOM状态管理的工程演进史

DOM状态管理是前端开发的基础能力,其核心在于解决对象与数据的生命周期绑定、内存泄漏防控及跨环境兼容等关键问题。jQuery数据缓存系统通过UUID标识、全局缓存体($.cache)、expando属性与分层数据结构(用户data/系统元数据)等机制,实现了状态与DOM节点的解耦。该设计不仅支撑了事件、动画等核心模块,更深刻影响了React Fiber节点、Vue响应式依赖追踪乃至WeakMap原生API的演进逻辑。作为一套面向真实浏览器差异(如IE6内存泄漏、Flash COM对象限制、dataset共存

diaoqi6581的博客 520

VC中sqlite的使用

在VC中对sqlite的使用,实现数据库大批数据的快速插入,读取数据库中的数据在ListCtrl中显示

jQuery属性与样式操作核心原理:attr、prop、data、css四大API详解

DOM操作是前端开发的底层基石,理解HTML属性(Attribute)与JavaScript属性(Property)的本质差异,是掌握动态交互的关键前提。jQuery通过.attr()、.prop()、.data()和.css()四套API,分别抽象了结构标记、状态控制、临时数据挂载与样式干预等核心能力。其中,.prop()精准映射布尔控件状态(如checked、disabled),.attr()维护HTML源码一致性,.data()提供类型安全的私有存储,.css()则覆盖内联样式、计算值读取与批量设置三

chuji3953的博客 482

pscad IEEE标准系统搭建说明

pscad IEEE标准系统搭建说明,包含典型的IEEE 9节点、14节点、30节点、39节点和118节点系统。内含标准测试系统的原始数据和潮流结果。

大中型超市收银系统(可直接运行)

光步前台收银系统系统功能:商品销售、商品退货、挂单、收银员权限、会员销售、单品取消、整单取消、商品查询、脱机销售、脱机数据上传,基本资料下载,开钱箱、小票打印、收款结算,支持多币种付款方式(现金、储值卡、礼券、微信等),支持多种促销。运行环境:.net 4.0登陆信息用户名:1001 密码:123456内置商品信息,商品编码可输入00001000 - 00010000,测试效果相关功能键F5 结算 F9挂单 F11商品查询 F8退货 Insert单品取消 Del整单取消 F12开钱箱F2 会员 Ctrl+Z退出系统 Home 锁屏 相关源码待公开

知识梳理——JavaScript

1. 说说前端中的事件流 HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件onclick、页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的,就需要了解一下“事件流”的概念。 什么是事件流:事件流描述的是从页面中接收事件的顺序. DOM2级事件流包括下面几个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段 addEventListener:addEventListener 是DOM2 级事件新增的指定事件处

wytraining 1632

Bootstrap Tooltip设计与实战:从提示组件到交互决策系统

Tooltip本质上是用户与系统间的一次微型对话接口,其核心在于交互语义分层——涵盖功能说明、上下文快照与风险预警三层信息。它依赖DOM结构的语义正确性、CSS定位逻辑的稳定性以及JavaScript生命周期的精准管控。在现代前端工程中,Tooltip已超越静态提示,演进为支持数据绑定、响应式降级、无障碍访问与实时环境感知的轻量级决策支持系统。尤其在企业级后台、医疗系统及金融应用中,一个健壮的Tooltip方案能显著降低误操作率、提升可访问性并通过动态内容增强用户决策质量。本文聚焦Bootstrap 5.3

weixin_33922670的博客 498

工作中使用到的单词(软件开发)_第五版

本文摘要: 本文为软件开发相关的术语与技术要点整理,主要包含2020-2025年间四版内容更新(No.01-41)。重点包括: 证书文件格式(PEM/P12)差异 外部API通信注意事项(Accept头设置、HTTPS连接问题) Postman工具使用技巧(Cookie管理、请求头设置) WAS配置相关经验(JVM设置、SSL连接问题) 数据库操作命令(DB2表结构修改) IBM安全管理组件(TAM/iv-user机制) 网络通信细节(chunked传输编码特性) 常用开发工具(curl、Postman)的

sun0322 2519

浏览器控制台的三大核心能力:执行、观测与实时干预

浏览器控制台远不止是console.log输出工具,它是运行在当前页面上下文中的JavaScript执行环境,本质是前端开发的实时反馈现场。其底层原理依托于浏览器(browser)的渲染进程、V8引擎及DOM树结构,通过执行代码、观测DOM状态与内存性能、干预网络请求和事件行为,实现对前端运行时的深度掌控。技术价值在于零侵入式调试、秒级问题定位与动态逻辑验证,广泛应用于SPA异常排查、SDK集成诊断、内存泄漏分析及embedded browser适配等工程场景。本文聚焦控制台作为‘前端手术室’的原生能力,深

weixin_33857230的博客 547
上一篇: C# 如何生成一个时间戳
下一篇: js中自定义QueryString方法,获取url中的参数值
love__coder
博客等级 码龄18年 180粉丝 248原创
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值