jQuery中事件绑定,大多使用on就足够了。

但是对于新添加的元素 on 的绑定事件 会不起作用。

因为 append 中的 节点是在整个文档加载之后才添加的,页面并不会为未来的元素初始化添加点击事件,因此 这种方式添加的 节点的点击事件是无效的。

解决方法:

事件委托。事件委托就是利用事件冒泡的原理,把事件添加到父元素或祖先元素上,触发执行效果。

原代码:

 $('#ul li').on('click', function() {
alert($(this).html())
})

修改为:

$(document).on('click', '#ul li', function() {
alert($(this).html())
})

jQuery 新添加元素事件绑定无效的更多相关文章

  1. 关于jQuery新的事件绑定机制on()的使用技巧

    关于jQuery新的事件绑定机制on()的使用技巧 http://www.jb51.net/article/36064.htm 本篇文章介绍了,关于jQuery新的事件绑定机制on()的使用技巧.需要 ...

  2. jQuery新的事件绑定机制on()

    浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理 ...

  3. jQuery新的事件绑定机制on()示例应用

    投稿:whsnow 字体:[增加 减小] 类型:转载   从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定,下面通过示例为大家介绍下     ...

  4. jQuery中的事件绑定方法

    在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知 ...

  5. Jquery中的事件绑定$("#btn").bind("click",function(){ })

    Jquery中的事件绑定:$("#btn").bind("click",function(){  }) 由于每次都这么调用太麻烦,所以jquery就用$(&qu ...

  6. jQuery 中的事件绑定

    一.事件概念 和数据库中的触发器一样,当操作了数据的时候会引发对应的触发器程序执行 一样,JS 中的事件就是对用户特定的行为作出相应的响应的过程,其实上就是浏览器 监听到用户的某些行为的时候会执行对应 ...

  7. jQuery三种事件绑定方式.bind(),.live(),.delegate()

    .bind(), .live(), 和 .delegate()之间的区别并不明显.但是理解它们的不同之处有助于写出更简洁的代码,并防止我们的交互程序中出现没有预料到的bug. 基础 DOM树 首先,图 ...

  8. 用jQuery.delegate()将事件绑定在父元素上面

    1.先看看官方的示例: <html> <head> <script type="text/javascript" src="/jquery/ ...

  9. jQuery插件 -- 动态事件绑定插件jquery.livequery.js

    http://blog.csdn.net/zzq58157383/article/details/7721974 动态事件绑定插件livequery, 可以利用它给相应的DOM元素注册事件或者触发回调 ...

随机推荐

  1. CSS-精灵图片的使用(从一张图片中截图指定位置图标)

      一.名词解释 在网页中,我们可以看到有很多的小图标,比如微博上的登录位置有很多这样的小图标.因为浏览器显示网页的所有内容都需要从我们自己的服务器进行下载,如果将这些图标分别存在服务器上,那么当需要 ...

  2. 学c++需要先学c语言吗?

    看你的需求,如果是底层开发,就必须学习C语言.如果只是应用开发,可以直接从C++开始学习.实际上这两个语言是平等的,只是在语法上C++尽量与C兼容,但仍然有很多不同的地方. 1) C++不是C的超集. ...

  3. JAVA高级篇(四、JVM垃圾回收和调优)

    本文转自https://zhuanlan.zhihu.com/p/25539690 JVM GC(垃圾回收机制) 在学习Java GC 之前,我们需要记住一个单词:stop-the-world .它会 ...

  4. psql备份和恢复(ubuntu)

    备份 sudo pg_dump -U  username  -f  filename.sql  dbname 恢复 psql -U username -f filename.sql dbname -- ...

  5. [Java] 方法 -- 繼承關係

    public class test { void show() { System.out.println("父類別"); } } public class test2 extend ...

  6. Web前端新手想提升自身岗位竞争力,需做好这3件事!

    Web前端开发行业的发展前景毋庸置疑,只要是互联网企业,几乎都需要Web前端开发工程师.虽然Web前端入行门槛低,但竞争逐渐激烈,想要取得高薪,就一定要具备强大的实力.那么,在重庆Web前端培训学习中 ...

  7. 我发起并创立了一个 .Net 平台上的 Web 业务系统 基础库 开源项目 WebEasy

    我 强调一点, 程序员 应该对 程序 有 控制感 . 过多的 控制反转 使 程序员 丧失了 对 程序 的 控制感 . 过多的 依赖注入 束缚了 程序员 的 创造力 . 过度复杂的 架构设计 束缚了 程 ...

  8. minIni: A minimal INI file parser

    https://www.compuphase.com/minini.htm https://github.com/compuphase/minIni

  9. 2013-7-30 802.1X企业级加密

    今天做了U9510的企业级加密标杆测试,写了企业级加密标杆设备的操作指南.最后做到server 2003却出了问题,peap能关联,但是TLS怎么都关联不上.用adb shell查看logcat日志, ...

  10. 滑雪(dp)

    问题 H: [例9.24]滑雪 时间限制: 1 Sec  内存限制: 128 MB提交: 21  解决: 13 题目描述 小明喜欢滑雪,因为滑雪的确很刺激,可是为了获得速度,滑的区域必须向下倾斜,当小 ...