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. IC卡T0协议中的过程字与状态字

    T0协议中,IC卡收到命里头以后向TTL回传过程字或状态字SW1.SW2: TTL和IC卡在二者之间的命令和数据交换的任何时刻都必须知道数据流的方向和IO线路由谁驱动. 摘录参考:<中国金融集成 ...

  2. [cf1038E][欧拉路]

    http://codeforces.com/contest/1038/problem/E E. Maximum Matching time limit per test 2 seconds memor ...

  3. WebSocket是什么原理?为什么可以实现持久连接?

    作者:Ovear 链接:https://www.zhihu.com/question/20215561/answer/40316953来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载 ...

  4. POJ1821 Fence

    题意 Language:Default Fence Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 6478 Accepted: ...

  5. DNS基础

    什么是DNS? DNS--Domain name system,域名系统,简单来说就是域名和IP地址间的映射关系.当你在浏览器的地址栏输入网址(或域名,如 www,baidu.com)的时候,在网络中 ...

  6. vs2015 加载项目的时启动:无法启动 IIS Express Web 服务器

    使用Visual Studio 2015 运行ASP.NET项目时,提示“无法启动IIS Express Web服务器”,无法运行,如图: 一般出现在重装系统之后,或者项目是从别的电脑上复制过来的.解 ...

  7. sequelize的mssql配置

    配置文件 development: { username: process.env.LOCAL_USERNAME, password: process.env.LOCAL_PASSWORD, data ...

  8. git之sourceTree使用github和码云的代码小结

    16.使用git出现的错误记录  15. Permission denied (publickey)错误: git远程库与本地库同步 git设置ssh公钥 Bad escape character ' ...

  9. Linux-Shell基础(变量,字符串,数组)

    一. 什么是shell shell是一个用C语言编写的程序,它是用户使用Linux的桥梁,又是一种程序设计语言. Shell 是指一种应用程序,这个应用程序提供了一个界面,用户通过这个界面访问操作系统 ...

  10. 使用RecyclerView实现聊天界面

    原文地址:https://blog.csdn.net/wang_wy/article/details/79032698