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" ...
随机推荐
- Asp.Net Web API 2
Asp.Net Web API 2第十八课——Working with Entity Relations in OData 前言 阅读本文之前,您也可以到Asp.Net Web API 2 系列导 ...
- sqlserver 2008 局域网跨服务器T-SQL操作(一)
--查看当前链接情况: select * from sys.servers; --增加链接,参数:服务器别名,为链接服务器的OLE DB数据源的产品名称,与此数据源对应的OLE DB访问接口的唯一编程 ...
- jQuery渐隐渐出的文字提示
<html> <head> <title>jquery渐隐渐出的文字提示</title> <style type="text/css&q ...
- iOS各种类
http://www.isenhao.com/xueke/jisuanji/bcyy/objc.php http://www.code4app.com 这网站不错,收集各种 iOS App 开发可以用 ...
- asp.net 两个页面之前传递数据
.在两个表单之间传递数据 看下面的代码: 对于WebForm1: private void Page_Load(object sender, System.EventArgs e) { ArrayLi ...
- discuz二次开发笔记(一)------$_G全解析
$_G 保存了 Discuz! 中所有的预处理数据缓存能够很好的提高程序的性能,一些配置数据没必要每次都查询数据库,只要在修改了的时候更新下缓存即可.Discuz! 中所有的缓存保存在 $_G[cac ...
- 使用device.js检测设备并实现不同设备展示不同网页
现在很多时候会用@media来控制页面在不同分辨率的设备商展示不同效果,但是有些时候想在直接在PC上展示一个做好的页面,在mobile展示另一个页面.这个时候可以借助device.js来检测设备,然后 ...
- Python之路第五天,基础(5)-序列化和字符串格式化
序列化 Python中用于序列化的两个模块 json 用于『字符串』和『python基本数据类型』间进行转换 pickle 用于『python特有的类型』和『python基本数据类型』间进行转换 js ...
- linux ARP攻击处理
今天部门受到arp攻击 多说机器无法正常联网了,windows下的绑定下mac地址或者打开360arp防火墙就就ok了.我讲讲linux下的arp攻击的发现和处理吧.边学边讲,说的不对的欢迎大家指出, ...
- Oracle EBS-SQL (WIP-1):检查非标任务没挂需求.sql
SELECT WE.WIP_ENTITY_NAME, MSI.SEGMENT1, MSI.DESCRIPTION, WDJ.CLASS_CODE, WDJ.START_QUANTITY, WDJ.SC ...