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. # 20175120 2018.3.10 《Java程序设计》第2周学习总结

    ## 教材学习内容总结第二章内容1.标识符第一个字符不能是数字字符不能是关键字和true\false\null2.8个基本数据类型boolean int byte short long float d ...

  2. Centos6.5搭建Elasticsearch

    ElasticSearch是基于Lucene的搜索服务.支持分布式多用户能力的全文搜索引擎,提供RESTful web接口.Elasticsearch是用Java开发的,Apache旗下开源项目,支持 ...

  3. 1.golang的环境搭建及入门

    安装包下载 下载链接:https://dl.google.com/go/go1.12.3.windows-amd64.msi 环境搭建 安装完成之后,找一个来存放go语言文件的文件夹,我这里选的是G: ...

  4. eclipse配置环境变量

    下载JDK:http://www.oracle.com/technetwork/java/javase/downloads/index.html 3.配置环境变量:右击“我的电脑”-->&quo ...

  5. PythonStudy——流程控制 Process control

    1. 分支结构 -- if -- if...else...-- if...elif...else...-- if嵌套 ''' if 条件: 同缩进的代码块 ''' if age > 18: pr ...

  6. 巧妇难为无米之炊( Model数据)

    一.相隔万里的客户端服务器数据交互 请求头发过去的轻量级文本数据,后台根据这些信息处理  response返回的如果时html的话,那么是全局刷新 在ajax中data回调获得了数据,然后操作dom进 ...

  7. zabbix之 zabbix server 跟 agent 更换ip地址

    描述: zabbix server端跟agent端更改 ip . 改完之后,相应配置文件 (zabbix_agentd.conf.zabbix_server.conf)的ip也进行了替换 但是依旧报错 ...

  8. 【python】脚本连续发送QQ邮件

    今天习得用python写一个连续发送QQ邮件的脚本,经过测试,成功给国内外的服务器发送邮件,包括QQ邮箱.163邮箱.google邮箱,香港科技大学的邮箱和爱丁堡大学的邮箱.一下逐步解答相关技巧. 首 ...

  9. MySQL 5.7临时表空间

    MySQL 5.7起,开始采用独立的临时表空间(和独立的undo表空间不是一回事哟),命名ibtmp1文件,初始化12M,且默认无上限. 选项 innodb_temp_data_file_path 可 ...

  10. 2017-07-06 eclipse在线安装SVN1.9插件

    1,百度搜索subeclipse,点击第一个: 2,官网说,文档已移动到github wiki上: 3,打开github wiki,复制最新发布版本地址: 4,在eclipse里面,打开help-&g ...