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. 对Enum的认识

    1.如何把枚举值取出来作为数据源:     public enum AuditState     {         未审核 = 1,         审核通过=2,         审核未通过=3, ...

  2. 使用 JavaScript 截屏

    经常在微博上看到很多内容使用的什么长微博截图,并且截图上还附加了很多其他的信息.之前对纯前端截图有些研究,正好本博客有这个需求,今天就把这东西实现了下. 需要声明的是,JavaScript 目前还不能 ...

  3. lua经典问题

    lua是一门比较简单的脚本语言,但是有些问题经常碰到,在这里总结一下: 1 lua 传参,如果参数是table,则相当于传引用 2 lua中只有nil和false返回假 3 lua and 和 or ...

  4. Python全栈之路----常用数据类型--集合

    集合(set):无序的,不重复的数据组合,它的主要作用如下:  · 去重,把一个列表变成集合,就自动去重了  · 关系测试,测试两组数据之间的交集.差集.并集等关系 1.基本操作:修改,删除,合并 & ...

  5. 数据持久化系列之Mysql

    一.命令行操作 1.显示所有库: show databases; 2.要操作某个库,比如库名: db_book:use db_book; 3.查看表的基本结构,比如表名: t_book:desc t_ ...

  6. node day2 vue read html

    app.js var http = require("http"); var fs = require('fs'); var url = require('url'); http. ...

  7. Processing 编程学习指南 (丹尼尔·希夫曼 著)

    https://processing.org/reference/ 第1章 像素 (已看) 第2章 Processing (已看) 第3章 交互 (已看) 第4章 变量 (已看) 第5章 条件语句 ( ...

  8. liunx学习笔记(一:常用命令)

    linux: 在学习linux之前我们应该多少了解windows的一些相关操作,linux也就是类似windows的另一种操作系统,用来管理软硬件的一种应用.在windows下你可以通过鼠标点击相关的 ...

  9. centos7忘记密码处理办法

    centos7忘记密码处理办法 此界面按e进入grub编辑界面 进入grub编辑界面.把linux16这行的ro修改为rw init=/sysroot/bin/sh. 按ctrl+x进入单用户模式 登 ...

  10. NIO、BIO、AIO区别

    一.同步阻塞I/O(BIO): 同步阻塞I/O,服务器实现模式为一个连接一个线程,即客户端有连接请求时服务器就需要启动一个线程进行处理,如果这个连接不做任何事情会造成不必要的线程开销,可以通过线程池机 ...