WEB前端技巧之JQuery为动态添加的元素绑定事件.md
jquery 为动态添加的元素绑定事件
如果直接写click函数的话，只能把事件绑定在已经存在的元素上，不能绑定在动态添加的元素上
可以用delegate来实现
.delegate( selector, eventType, handler )
例如示例:
$('someUlSelector').delegate('someLiSelector','click',function(){//codes...//$(this) for the current jquery instance of the element});
jQuery的delegate有好几个缺憾
因为sizzle少提供了以refEl为参考、一个按selector来筛选els的filter(els,selector,refEl)的功能，jq需要自己去实现类似的功能。
- 其一：selector是基于
:root的，而不是:scope的。所以，在写代码时，需要带上scrope的定位部分。—-注：:root指document根节点，:scope指代理节点
示例代码如
<HTML><HEAD><TITLE>JK Test</TITLE><METAcontent="text/html; charset=gb2312"http-equiv=Content-Type><scriptsrc="http://common.cnblogs.com/script/jquery.js"type="text/javascript"></script><style>div{border:1px solid balck;padding:5px;margin:2px;}</style></HEAD><body><divid="div1">div1<divid="div1_1">div1_1<divid="div1_1_1">div1_1_1<spanstyle="color:red">span</span></div></div><divid="div1_2">div1_2</div></div></body><scripttype="text/javascript">$('#div1').delegate('#div1>*','click',function(){alert(this.innerHTML);});//点击div1_1，div1_2或时，都有效。</script></HTML>
//例如，代理div1的儿子，需要这样写：$('#div1').delegate('#div1>*','click',fun});//而不是这样写：$('#div1').delegate('>*','click',fun});
- 其二：多个祖先满足条件时，只触发了target的closest的那一个祖先，而不是都触发。—-想不通jquery为什么要采用这个策略
示例代码如
<HTML><HEAD><TITLE>JK Test</TITLE><METAcontent="text/html; charset=gb2312"http-equiv=Content-Type><scriptsrc="http://common.cnblogs.com/script/jquery.js"type="text/javascript"></script><style>div{border:1px solid balck;padding:5px;margin:2px;}</style></HEAD><body><divid="div1">div1<divid="div1_1">div1_1<divid="div1_1_1">div1_1_1<spanstyle="color:red">span</span></div></div><divid="div1_2">div1_2</div></div></body><scripttype="text/javascript">$('body').delegate('div','click',function(){alert(this.innerHTML);});//点击id1_1_1时，应该同时代理到三个div的点击</script></HTML>
- 其三：与sizzle一样，可能是没有回溯，在某些情况下有bug。
例如，当span有多个祖先是div时，这个代理会失效：$('body').delegate('body>div span','click',fun;});
示例代码如
<HTML><HEAD><TITLE>JK Test</TITLE><METAcontent="text/html; charset=gb2312"http-equiv=Content-Type><scriptsrc="http://common.cnblogs.com/script/jquery.js"type="text/javascript"></script><style>div{border:1px solid balck;padding:5px;margin:2px;}</style></HEAD><body><divid="div1">div1<divid="div1_1">div1_1<divid="div1_1_1">div1_1_1<spanstyle="color:red">span</span></div></div><divid="div1_2">div1_2</div></div></body><scripttype="text/javascript">$('body').delegate('body>div span','click',function(){alert(this.innerHTML);});//点击span时，应该出现alert的</script></HTML>
WEB前端技巧之JQuery为动态添加的元素绑定事件.md的更多相关文章
- jQuery 为动态添加的元素绑定事件
在使用jquery的方式为元素绑定事件时,我经常使用bind或者click,但这只能为页面已经加载好的元素绑定事件.像需要用ajax的方式请求远程数据来动态添加页面元素时,显然以上几种绑定事件的方式是 ...
- jQuery对 动态添加 的元素 绑定事件（on()的用法）
从jQuery 版本 1.7 起,on() 方法是向被选元素添加事件处理程序的(官方推荐)首选方法. 当浏览器下载完一个页面的时候就开始渲染(翻译)HTML标签,然后执行css.js代码,在执行js代 ...
- jquery append 动态添加的元素绑定事件on
用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...
- jQuery给动态添加的元素绑定事件的方法
我们在开发过程会遇到无法给动态元素添加绑定事件,解决方案如下: 例如 <div id="testdiv"> <ul></ul> </d ...
- jquery html动态添加的元素绑定事件详解
在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况: <div id="testdiv"> <ul></ul> </div&g ...
- 关于 jquery html 动态添加的元素绑定事件——On()
Ajax动态生成的数据,动作绑定需要重新执行 $(document).on('click','.btn1',function(){}); 替换: $('btn1').on('click') = fun ...
- Jquery动态添加的元素绑定事件的3种方法
假设我们点击li标签,弹出他的文本,如果是动态添加的li,点击是没有效果的,压根弹不出来文本. 下面博主分享一下为动态添加的元素绑定事件的三种方法,网上一般都是两种,我在这里多增加了一种. 事件案例: ...
- jQuery中如何给动态添加的元素绑定事件
jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定.在1.7版本以前使用live.但是在1.8版本以后推荐使用on.这 ...
- js动态添加的元素绑定事件
最近做的项目要实现一个动态添加动态删除的功能,思考了一下,该怎么给动态添加的元素绑定事件.最后觉得有两种方式比较可靠,第一种是在动态添加的html代码里添加oclick事件,然后给传个唯一的参数来判断 ...
随机推荐
- 修改 input[type="radio"] 和 input[type="checkbox"] 的默认样式
表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...
- [BZOJ2687]交与并[决策单调性]
题意 给定 \(n\) 个区间,我们定义区间集合 \(S(|S|>1)\) 的权值为 区间交 \(\times\) 区间并,找出权值最大的区间集合. \(n\le 10^6\) 分析 首先排除区 ...
- 用Spring.Services整合 thrift0.9.2生成的wcf中间代码-复杂的架构带来简单的代码和高可维护性
最近一直在看关于thrift的相关文章,涉及到的内容的基本都是表层的.一旦具体要用到实际的项目中的时候就会遇到各种问题了! 比如说:thrift 的服务器端载体的选择.中间代码的生成options(a ...
- 12、利用docker快速搭建Wordpress网站
一.准备工作 结构图: 用户访问页面,Nginx将请求进行转发,如果请求的是php页面,则通过FastCGI转发给后端php进行处理:如果非php页面,则直接返回静态页面. 关键点: mysql.ph ...
- 由Windows开发平台向Linux平台转移的一些想法
从毕业到现在已经快20年了,一直在从事Windows平台上的开发工作.刚毕业那会大约是97,98年左右,工作的平台除了Windows平台还有Dos平台,因为在学校学习时,也是从Dos开始的.因此对于从 ...
- 本科毕业平均年薪 30 万！经济寒冬挡不住 AI 人才的火热！
互联网行业遭遇寒冬,企业纷纷裁员缩招,而 BAT 和硅谷明星公司对 AI 人才的投入却并不见放缓.为争夺相关人才,给应届毕业生开出的平均年薪高达 30 万. 而 TensorFlow 作为当下最流行的 ...
- 作业要求 20181204-5 Final阶段贡献分配规则及实施
此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2479 贡献规则 贡献分分配规则: 组内一共八名同学,贡献分共计80分. ...
- 《Linux内核分析》第四周学习笔记
<Linux内核分析>第四周学习笔记 扒开系统调用的三层皮(上) 郭垚 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.c ...
- Linux内核分析第二周总结
计算机是如何工作的? 计算机的"三大法宝": 存储程序计算机 函数调用堆栈 中断机制 堆栈是计算机运行高级语言的基础 函数调用堆栈: 32位X86通过函数调用堆栈来传递参数 使用e ...
- C++：继承访问属性（public/protected/private）
• 公有继承(public) 公有继承在C++中是最常用的一种继承方式,我们先来看一个示例: #include<iostream> using namespace std; class F ...