今天在写界面时,希望对一些由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绑定动态生成元素时碰到的问题的更多相关文章

  1. jQuery使用on()绑定动态生成元素的事件无效

    jquery on()方法是jquery1.7+后才使用的 由于需求:动态添加了以下代码 <tr class="pj" data-val="no"> ...

  2. jQuery1.9之后使用on()绑定 动态生成元素的 事件无效

    来自互联网: 需要绑定a的父级元素(此元素必须为静态元素,不是后来动态生成的),然后设定on()方法的selector参数才行: $('p').on('mouseenter', 'a', functi ...

  3. jQuery on()方法绑定动态元素的点击事件

    之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态 ...

  4. jQuery on()方法绑定动态元素的点击事件无效

    之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态 ...

  5. jQuery on()方法绑定动态元素的点击事件实例代码浅析

    之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态 ...

  6. 动态生成元素动作绑定,jquery 1.9如何实现

    1.7后增加了 live()1.9后被移除了 网上说可以用 on() 代替 可以实际在动态生成元素上绑定动作,没效果,求解绝方法(用低版本的jQuery这种方法,求别说..) 答: 之前有老兄回答过类 ...

  7. jQuery on()方法绑定动态元素的点击事件无响应的解决办法

    $('#check_all').on('click' , function(){ alert(1); }); $("#yujinlist").append(html); count ...

  8. jquery 实现重复点击一个元素时不重复执行效果

    jquery 实现重复点击一个元素时不重复执行效果 这需要用到jquery的stop方法 实例 停止当前正在运行的动画: $("#stop").click(function(){ ...

  9. jquery一次绑定多个元素事件

    jquery一次绑定多个元素事件 $(".peoplenum,input[name$='otherAmount'],#aa,#bb").bind("change" ...

随机推荐

  1. asp.net 总结

    asp.net 是服务器段控件,运行是返回一个客户端html 页面给服务器

  2. Windows系统的安装

    一.写在前面        笔者最近因为换工作,在家待业甚感无聊,于是想要整理一些在Windows系统的一些安装方法和下载资源,一来给自己做个备忘,二来把一些不成熟的想法分享出去,希望大家予以指正. ...

  3. UVA 1395 Slim Span

    题意: 要求的是所有生成树中最大边与最小边差值最小的那个. 分析: 其实可以利用最小瓶颈生成树,就是最小生成树这一性质,枚举原图的最小边,然后找相应生成树的最大边 代码: #include <i ...

  4. 解决OpenWrt多拨刚开机拨号只拨上一次问题

    红色标注为需要权限755/etc/ppp/ip-up.d/ip-up: 一旦 PPP 连结建立后, pppd 会找寻 /etc/ppp/ip-up 指令稿 如果这个指令稿存在并且可以执行的话,那么 P ...

  5. C语言学习的经典书籍--转载

    推荐前言: 原文出处:http://book.douban.com/doulist/338101/ 和其他语言相比(例如C++),C语言是一门比较“小”的语言,可以在较短的时间内入门.但是由于C的很强 ...

  6. 整理mysql的一些常用用法

    在php项目中,使用mysql的一些常用的语句,今天有空系统整体一下.有些整理自网络,如有错误,请指正,谢谢.... #显示数据库和显示数据表show databases;use databaseNa ...

  7. SVN提交出现“< < < < < < < .mine’无效,路径中具有非法字符”的问题

    使用SVN提交或更新后经常会出现”Files 的值’< < < < < < < .mine’无效.路径中具有非法字符”的错误.查阅了下资料,是因为:你更改了一 ...

  8. HTML5中的服务器‘推送’技术 -Server-Sent Events

    转帖:http://www.developersky.net/thread-63-1-1.html 一直以来,HTTP协议都是严格遵循Request-Response模型的.客户端发送一个Reques ...

  9. php设计模式笔记--总结篇

    一.引入  设计模式的一般定义不再说,只大概说一下我理解的设计模式,我理解的设计模式的主要目的是利用面向对象(类.接口等)特点,让代码更加易于扩展,易于重用,易于维护.这三个特点也就要求我们不要将太多 ...

  10. React 同构

    React 同构 搬运 https://segmentfault.com/a/1190000004671209 究竟什么是同构呢? 同构就是希望前端 后端都使用同一套逻辑 同一套代码 Nodejs出现 ...