jQuery on()方法绑定动态元素的点击事件实例代码浅析
之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态生成的标签点击了没反应,而live方法却能够支持,于是乎到处查资料,问网友,结果找了好久在一篇文章中终于找到了答案。。。
jQuery 使用on绑定动态生成的元素时,不能直接用该对象操作,而是选择其非动态生成的父节点然后再找到本身才能达到效果。大家看看源码就知道了。生成的按钮基数项on方法点击无效live方法有效。
比如页面上有下边两个元素:
1
2
3
|
<input type= "button" name= "addbtn" value= "按钮添加" /> <div id= "test" > </div> |
使用下边的jQuery代码大家可以对比看看区别:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
$( function () { var a = 1, $_div = $( '#test' ); $( 'input[name=addbtn]' ).on( 'click' , function () { $_div.append( '<input type="button" name="test' + a + '" value="按钮' + a + '"/>' ); a++; }); //偶数项点击事件 $_div.on( 'click' , 'input[name^=test]:even' , function () { alert( '我是有效的on方法,你能看见我吗:' + this .value); }); //奇数项绑定的点击事件 发现点击无效,而是用live方法却能够支持 $( 'input[name^=test]:odd' ).on( 'click' , function () { alert( '我是无效的on方法,你不能看见我' ); }); //奇数项绑定的点击事件 发现点击无效,而是用live方法却能够支持 $( 'input[name^=test]:odd' ).live( 'click' , function () { alert( '我是live方法,你能看见我吗:' + this .value); }); }); |
jQuery on()方法绑定动态元素的点击事件实例代码浅析的更多相关文章
- jQuery on()方法绑定动态元素的点击事件无响应的解决办法
$('#check_all').on('click' , function(){ alert(1); }); $("#yujinlist").append(html); count ...
- jQuery on()方法绑定动态元素的点击事件
之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态 ...
- jQuery on()方法绑定动态元素的点击事件无效
之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态 ...
- jQuery绑定动态元素的点击事件无效
之前就一直受这个问题的困扰,在写ajax加载数据的时候发现,后面追加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢?那么,我们通过下面的示例简单说明. 示例如下: ...
- jquery on()方法绑定多个选择器,多个事件
on(events,[selector],[data],fn) •events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click"或"keydown.myP ...
- jQuery on()绑定动态元素出现的问题小结
jQuery on()方法是官方推荐的绑定事件的一个方法.使用 on() 方法可以给将来动态创建的动态元素绑定指定的事件,通过本文给大家介绍jQuery on()绑定动态元素出现的问题小结,需要的朋友 ...
- jquery无法为动态生成的元素添加点击事件的解决方法
遇到 jquery无法为动态生成的元素添加点击事件,谷歌一下,整理一下解决方法如下: (<li>中间的元素是动态生成的), 现在想为<i>添加点击事件, 例子如下: <d ...
- jquery:为动态加载的元素添加点击事件
jquery:为动态加载的元素添加点击事件 最近在做项目的时候遇到了这样一个问题,给用ajax动态加载出来的内容添加点击事件,但是怎么都触发不了,经过查询试验总结出正确的写法 在jquery1.7之前 ...
- Jquery 动态添加元素 添加点击事件
给动态添加的元素添加js事件,不能直接添加js事件,需要借助on( )方法,给选择器指定的子元素添加事件处理函数,并非选择器本身: 1. 语法 $(selector).on(event,childSe ...
随机推荐
- memcache 学习笔记
Memcached是国外社区网站LiveJournal的开发团队开发的高性能的分布式内存缓存服务器.一般的使用目的是,通过缓存数据库查询结果,减少数据库访问次数,以提高动态Web应用的速度.提高可扩展 ...
- [LeetCode] Remove Element题解
Remove Element: Given an array and a value, remove all instances of that value in place and return t ...
- 类库项目如何既能支持netcore2.0,也能支持net4.5
手动更改项目配置 .csporj 中的代码 <TargetFramework>netcoreapp2.</TargetFramework> 改成 <TargetFrame ...
- python中logging日志基本用法,和进程安全问题
低配版 import logging logging.debug('debug message') # 调试模式 logging.info('info message') # 正常运转模式 loggi ...
- wget 抓取整站
wget -r -p -np -k http://doc.code365.net/Manual/FreeBSD_Arch_HandBook/ -r 递归 -p, --page-requisites(页 ...
- css 超出部分以省略号的形式显示
想要实现文字超出部分以省略号的形式显示首先需要给此元素设置一个宽度,然后添加以下属性 overflow: hidden;/*内容超出后隐藏*/ text-overflow: ellipsis;/*超出 ...
- Android深入四大组件(六)Service的启动过程
前言 此前我用较长的篇幅来介绍Android应用程序的启动过程(根Activity的启动过程),这一篇我们接着来分析Service的启动过程.建议阅读此篇文章前,请先阅读Android深入四大组件(一 ...
- 客户端和服务端如何使用Token和Session
一.我们先解释一下他的含义: 1.Token的引入:Token是在客户端频繁向服务端请求数据,服务端频繁的去数据库查询用户名和密码并进行对比,判断用户名和密码正确与否,并作出相应提示,在这样的背 ...
- intellij idea下面安装热部署插件 JRebel 5.2
之前一直是用的eclipse的JRebel,因为现在的公司用的是idea,于是尝试了在idea下面安装,把安装的过程中出现的问题记录下. 1.首先是在 idea里面install JRebel,Fil ...
- SQL 语句及关键字的用法
一.SELECT select [ALL|DISTINCT] select_list [into new table] FROM table_source [where serch_conditaio ...