jquery 为动态添加的元素绑定事件

如果直接写click函数的话，只能把事件绑定在已经存在的元素上，不能绑定在动态添加的元素上

可以用delegate来实现

  1. .delegate( selector, eventType, handler )

例如示例:

  1. $('someUlSelector').delegate('someLiSelector','click',function(){
  2. //codes...
  3. //$(this) for the current jquery instance of the element
  4. });

jQuery 事件 - delegate() 方法

jQuery的delegate有好几个缺憾

因为sizzle少提供了以refEl为参考、一个按selector来筛选els的filter(els,selector,refEl)的功能，jq需要自己去实现类似的功能。

  • 其一：selector是基于:root的，而不是:scope的。所以，在写代码时，需要带上 scrope 的定位部分。—-注：:root指document根节点，:scope指代理节点

示例代码如

  1. <HTML><HEAD><TITLE>JK Test</TITLE>
  2. <METAcontent="text/html; charset=gb2312"http-equiv=Content-Type>
  3. <scriptsrc="http://common.cnblogs.com/script/jquery.js"type="text/javascript"></script>
  4. <style>
  5. div{border:1px solid balck;padding:5px;margin:2px;}
  6. </style>
  7. </HEAD>
  8. <body>
  9. <divid="div1">div1
  10. <divid="div1_1">div1_1
  11. <divid="div1_1_1">div1_1_1
  12. <spanstyle="color:red">span</span>
  13. </div>
  14. </div>
  15. <divid="div1_2">div1_2
  16. </div>
  17. </div>
  18. </body>
  19. <scripttype="text/javascript">
  20. $('#div1').delegate('#div1>*','click',function(){alert(this.innerHTML);});//点击div1_1，div1_2或时，都有效。
  21. </script>
  22. </HTML>
  1. //例如，代理div1的儿子，需要这样写：
  2. $('#div1').delegate('#div1>*','click',fun});
  3. //而不是这样写：
  4. $('#div1').delegate('>*','click',fun});
  • 其二：多个祖先满足条件时，只触发了target的closest的那一个祖先，而不是都触发。—-想不通jquery为什么要采用这个策略

示例代码如

  1. <HTML><HEAD><TITLE>JK Test</TITLE>
  2. <METAcontent="text/html; charset=gb2312"http-equiv=Content-Type>
  3. <scriptsrc="http://common.cnblogs.com/script/jquery.js"type="text/javascript"></script>
  4. <style>
  5. div{border:1px solid balck;padding:5px;margin:2px;}
  6. </style>
  7. </HEAD>
  8. <body>
  9. <divid="div1">div1
  10. <divid="div1_1">div1_1
  11. <divid="div1_1_1">div1_1_1
  12. <spanstyle="color:red">span</span>
  13. </div>
  14. </div>
  15. <divid="div1_2">div1_2
  16. </div>
  17. </div>
  18. </body>
  19. <scripttype="text/javascript">
  20. $('body').delegate('div','click',function(){alert(this.innerHTML);});//点击id1_1_1时，应该同时代理到三个div的点击
  21. </script>
  22. </HTML>
  • 其三：与sizzle一样，可能是没有回溯，在某些情况下有bug。

例如，当span有多个祖先是div时，这个代理会失效：$('body').delegate('body>div span','click',fun;});
示例代码如

  1. <HTML><HEAD><TITLE>JK Test</TITLE>
  2. <METAcontent="text/html; charset=gb2312"http-equiv=Content-Type>
  3. <scriptsrc="http://common.cnblogs.com/script/jquery.js"type="text/javascript"></script>
  4. <style>
  5. div{border:1px solid balck;padding:5px;margin:2px;}
  6. </style>
  7. </HEAD>
  8. <body>
  9. <divid="div1">div1
  10. <divid="div1_1">div1_1
  11. <divid="div1_1_1">div1_1_1
  12. <spanstyle="color:red">span</span>
  13. </div>
  14. </div>
  15. <divid="div1_2">div1_2
  16. </div>
  17. </div>
  18. </body>
  19. <scripttype="text/javascript">
  20. $('body').delegate('body>div span','click',function(){alert(this.innerHTML);});//点击span时，应该出现alert的
  21. </script>
  22. </HTML>

中文API的解释delegate

WEB前端技巧之JQuery为动态添加的元素绑定事件.md的更多相关文章

  1. jQuery 为动态添加的元素绑定事件

    在使用jquery的方式为元素绑定事件时,我经常使用bind或者click,但这只能为页面已经加载好的元素绑定事件.像需要用ajax的方式请求远程数据来动态添加页面元素时,显然以上几种绑定事件的方式是 ...

  2. jQuery对 动态添加 的元素 绑定事件（on()的用法）

    从jQuery 版本 1.7 起,on() 方法是向被选元素添加事件处理程序的(官方推荐)首选方法. 当浏览器下载完一个页面的时候就开始渲染(翻译)HTML标签,然后执行css.js代码,在执行js代 ...

  3. jquery append 动态添加的元素绑定事件on

    用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...

  4. jQuery给动态添加的元素绑定事件的方法

    我们在开发过程会遇到无法给动态元素添加绑定事件,解决方案如下: 例如 <div id="testdiv">   <ul></ul> </d ...

  5. jquery html动态添加的元素绑定事件详解

    在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况: <div id="testdiv"> <ul></ul> </div&g ...

  6. 关于 jquery html 动态添加的元素绑定事件——On()

    Ajax动态生成的数据,动作绑定需要重新执行 $(document).on('click','.btn1',function(){}); 替换: $('btn1').on('click') = fun ...

  7. Jquery动态添加的元素绑定事件的3种方法

    假设我们点击li标签,弹出他的文本,如果是动态添加的li,点击是没有效果的,压根弹不出来文本. 下面博主分享一下为动态添加的元素绑定事件的三种方法,网上一般都是两种,我在这里多增加了一种. 事件案例: ...

  8. jQuery中如何给动态添加的元素绑定事件

    jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定.在1.7版本以前使用live.但是在1.8版本以后推荐使用on.这 ...

  9. js动态添加的元素绑定事件

    最近做的项目要实现一个动态添加动态删除的功能,思考了一下,该怎么给动态添加的元素绑定事件.最后觉得有两种方式比较可靠,第一种是在动态添加的html代码里添加oclick事件,然后给传个唯一的参数来判断 ...

随机推荐

  1. More Effective C++ Item14：明智运用exception specifications

    使用exception specifications你必须非常仔细去确保,函数调用的子函数.注册的回调函数不会违背约定.而设计模板内部的异常更难确保. 设计回调机制的时候,如果调用方规定了不抛出异常, ...

  2. 01.如何把.py文件打包成为exe，重点讲解pyinstaller的用法

    1.应用场景 1.1 故事背景 我自己用python写了一个小程序发给其他同事用,给他的就是一个.py文件,不过他觉得比较麻烦,还要安装环境,他问我有没有简单一点的方式,我给一个exe文件,他就不用安 ...

  3. Asp.Net_上传文件(ftp、webClient、webService)

    第一种:通过FTP来上传文件 首先,在另外一台服务器上设置好FTP服务,并创建好允许上传的用户和密码,然后,在ASP.NET里就可以直接将文件上传到这台 FTP 服务器上了.代码如下: <%@ ...

  4. 读取配置文件的URL，使用httpClient发送Post和Get请求，实现查询快递物流和智能机器人对话

    1.主要jar包: httpclient-4.3.5.jar   httpcore-4.3.2.jar 2.目录结构如图所示: 3.url.properties文件如下: geturl=http:// ...

  5. MVC模式简单的Xml文档解析加Vue渲染

    前端代码: <script src="~/Js/jquery-3.3.1.min.js"></script> <script src="~/ ...

  6. 为什么说LAXCUS颠覆了我的大数据使用体验

    切入正题前,先做个自我介绍. 本人是从业三年的大数据小码农一枚,在帝都一家有点名气的广告公司工作,同时兼着大数据管理员的职责. 平时主要的工作是配合业务部门,做各种广告大数据计算分析工作,然后制成各种 ...

  7. PAT甲题题解-1105. Spiral Matrix (25)-（模拟顺时针矩阵）

    题意:给定N,以及N个数.找出满足m*n=N且m>=n且m-n最小的m.n值,建立大小为m*n矩阵,将N个数从大到下顺时针填入矩阵中. #include <iostream> #in ...

  8. redis启动停止+密码认证

    redis启动停止命令 ./bin/redis-server redis.conf ./bin/redis-cli -h 127.0.0.1 -p 6379 shutdown flushall ——& ...

  9. 11.11 Daily Scrum

      Today's tasks  Tomorrow's tasks 丁辛 餐厅列表事件处理 餐厅列表事件处理             李承晗             实现指定地点搜索 整合已经完成的部 ...

  10. 2-Eighteenth Scrum Meeting-20151218

    任务安排 成员 今日完成 明日任务 闫昊 写完学习进度记录的数据库操作  写完学习进度记录的数据库操作 唐彬 编写与服务器交互的代码 和服务器老师交流讨论区后台接口 史烨轩 获取视频url  尝试使用 ...