JQuery使用on绑定动态生成元素时碰到的问题
今天在写界面时,希望对一些由JS代码动态添加的html标签进行事件绑定,使用了jquery 1.6+才提供的on函数。我的JQ版本是1.9.2。
以下这段代码是动态生成的。
<div class="container">
<!--动态生成部分-->
<p>
…………
</p>
</div>
我对<p>标签绑定了on函数,但是实际使用时却无法触发事件。
查看了官方文档,发现on有四个可选参数,分别是:events,[selector],[data],fn。每个参数的功能如下:
events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click"或"keydown.myPlugin" 。
selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略,当它到达选定的元素,事件总是触发。
data:当一个事件被触发时要传递event.data给事件处理函数。
fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写,返回false。
于是查阅了相关资料之后,发现selector这个函数用处非常大。
$("p").on('click', function(){
//…………
});
之前我是这样写的函数:
如果你的元素是动态添加的,那么你需要首先绑定一个静态的父元素,然后再使用selector来选择动态添加的元素。
代码修改如下:
$("。container").on('click', 'p', function(){
//…………
});
至此,运行无误。
参考资料:http://mini.kisexu.com/post/2013-08-07/40053424637
JQuery使用on绑定动态生成元素时碰到的问题的更多相关文章
- jQuery使用on()绑定动态生成元素的事件无效
jquery on()方法是jquery1.7+后才使用的 由于需求:动态添加了以下代码 <tr class="pj" data-val="no"> ...
- jQuery1.9之后使用on()绑定 动态生成元素的 事件无效
来自互联网: 需要绑定a的父级元素(此元素必须为静态元素,不是后来动态生成的),然后设定on()方法的selector参数才行: $('p').on('mouseenter', 'a', functi ...
- jQuery on()方法绑定动态元素的点击事件
之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态 ...
- jQuery on()方法绑定动态元素的点击事件无效
之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态 ...
- jQuery on()方法绑定动态元素的点击事件实例代码浅析
之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态 ...
- 动态生成元素动作绑定,jquery 1.9如何实现
1.7后增加了 live()1.9后被移除了 网上说可以用 on() 代替 可以实际在动态生成元素上绑定动作,没效果,求解绝方法(用低版本的jQuery这种方法,求别说..) 答: 之前有老兄回答过类 ...
- jQuery on()方法绑定动态元素的点击事件无响应的解决办法
$('#check_all').on('click' , function(){ alert(1); }); $("#yujinlist").append(html); count ...
- jquery 实现重复点击一个元素时不重复执行效果
jquery 实现重复点击一个元素时不重复执行效果 这需要用到jquery的stop方法 实例 停止当前正在运行的动画: $("#stop").click(function(){ ...
- jquery一次绑定多个元素事件
jquery一次绑定多个元素事件 $(".peoplenum,input[name$='otherAmount'],#aa,#bb").bind("change" ...
随机推荐
- ParNew收集器
ParNew收集器其实就是Serial收集器的多线程版本,除了使用多条线程进行垃圾收集之外,其余行为包括Serial收集器可用的所有控制参数,其中Par是Paralle简写l 并行(Parallel) ...
- 整理HTML的一些基础
HTML,超文本标记语言(HyperText Markup Language) 超文本:指页面内可以包含图片.链接.音乐.程序等非文字元素 标记:页面的由各种标签(标记)组成,文本有隐藏的文本标签 H ...
- Ext布局篇
EXT标准布局类 收藏 面板相当于一张干净的白纸,如果直接在上面添加内容,将很难控制面板中内容的显示位置,面板元素越多就越显得凌乱,所以需要在面板上划分不同的区域,将面板内容展示到希望的位置上.E ...
- UI事件之unload、resize和scroll
unload事件 当页面卸载或用户从当前页面换到其他页面上时,会在window上触发unload事件.根据DOM2级规范规定,unload应该在body上触发,但所有浏览器都实现了在window上触发 ...
- TCP/IP详解之:IP选路 动态选路协议
第九章 IP选路 netstat -rn 显示路由表 初始化路由表的两种方法: 方法1:在配置文件中指定静态路由(不常用) 方法2:运行路由守护程序 或者 使用ICMP路由器发现报文 没有到达目的地的 ...
- Inno Setup打包的程序提升为管理员权限
Inno Setup打包的程序在Win7 64位系统上安装,安装步骤最后一步若选中运行程序,会跳出一个错误提示框. 这是因为64位win7系统运行程序时需要管理员权限,而打包的文件并没有这个权限就试图 ...
- [ZT]图像处理库的比较:OpenCV,FreeImage,CImg,CxImage
1.对OpenCV 的印象:功能十分的强大,而且支持目前先进的图像处理技术,体系十分完善,操作手册很详细,手册首先给大家补计算机视觉的知识,几乎涵盖了近10年内的主流算法: 然后将图像格式和矩阵运算, ...
- c#访问各数据库的providerName各驱动
在machine.config(C:/WINDOWS/Microsoft.NET/Framework/v2.0.50727/CONFIG)文件中有这么一段: <system.data> & ...
- js数组(一)
一.创建数组两种方法: 1Array构造 var colors = new Array();2.字面量表示什么事字面量,如 var colors = ["red","gr ...
- 用正则表达式抓取网页中的ul 和 li标签中最终的值!
获取你要抓取的页面 const string URL = "http://www.hn3ddf.gov.cn/price/GetList.html?pageno=1& ...