jQuery 新添加元素事件绑定无效
jQuery中事件绑定,大多使用on就足够了。
但是对于新添加的元素 on 的绑定事件 会不起作用。
因为 append 中的 节点是在整个文档加载之后才添加的,页面并不会为未来的元素初始化添加点击事件,因此 这种方式添加的 节点的点击事件是无效的。
解决方法:
事件委托。事件委托就是利用事件冒泡的原理,把事件添加到父元素或祖先元素上,触发执行效果。
原代码:
$('#ul li').on('click', function() {
alert($(this).html())
})
修改为:
$(document).on('click', '#ul li', function() {
alert($(this).html())
})
jQuery 新添加元素事件绑定无效的更多相关文章
- 关于jQuery新的事件绑定机制on()的使用技巧
关于jQuery新的事件绑定机制on()的使用技巧 http://www.jb51.net/article/36064.htm 本篇文章介绍了,关于jQuery新的事件绑定机制on()的使用技巧.需要 ...
- jQuery新的事件绑定机制on()
浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理 ...
- jQuery新的事件绑定机制on()示例应用
投稿:whsnow 字体:[增加 减小] 类型:转载 从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定,下面通过示例为大家介绍下 ...
- jQuery中的事件绑定方法
在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知 ...
- Jquery中的事件绑定$("#btn").bind("click",function(){ })
Jquery中的事件绑定:$("#btn").bind("click",function(){ }) 由于每次都这么调用太麻烦,所以jquery就用$(&qu ...
- jQuery 中的事件绑定
一.事件概念 和数据库中的触发器一样,当操作了数据的时候会引发对应的触发器程序执行 一样,JS 中的事件就是对用户特定的行为作出相应的响应的过程,其实上就是浏览器 监听到用户的某些行为的时候会执行对应 ...
- jQuery三种事件绑定方式.bind(),.live(),.delegate()
.bind(), .live(), 和 .delegate()之间的区别并不明显.但是理解它们的不同之处有助于写出更简洁的代码,并防止我们的交互程序中出现没有预料到的bug. 基础 DOM树 首先,图 ...
- 用jQuery.delegate()将事件绑定在父元素上面
1.先看看官方的示例: <html> <head> <script type="text/javascript" src="/jquery/ ...
- jQuery插件 -- 动态事件绑定插件jquery.livequery.js
http://blog.csdn.net/zzq58157383/article/details/7721974 动态事件绑定插件livequery, 可以利用它给相应的DOM元素注册事件或者触发回调 ...
随机推荐
- Redhat 6.5安装JDK和Tomcat小记
下面将今天在Linux 6.5环境安装JDK和Tomcat的过程记录下来,以备以后查用. Linux环境:Redhat 6.5 JDK版本:7u79 Tomcat版本:7.0.70 1.下载JDK文件 ...
- Android的发展历史
Android一词最早出现于法国作家利尔亚当(Auguste Villiers de l’Isle-Adam)在1886年发表的科幻小说<未来夏娃>(L’ève future)中.他将外表 ...
- oracle批量删除某个用户下的所有表
打开sql developer,输入如下语句,把USERNAME替换为需要删除的的用户名 然后把查询出来的结果复制出来执行一遍就行了. SELECT 'DROP table '||table_name ...
- 【docker】将Java jar文件生成镜像、上传镜像并生成镜像压缩文件
概述 将Springboot的web服务打包成Jar包后,自动化脚本将jar打包成镜像.上传镜像.并生成镜像的压缩文件: Dockerfile FROM 10.254.9.21/library/ora ...
- Win7系统安装Centos7.0双系统(一)
项目环境测试,过去在虚拟机安装只要配置好镜像很快就可以轻松安装,但是在真实机中安装就有些略坑.网上有很多说法是把iso文件中安装引导拷出来,试了很久还是觉得U盘镜像直接安装更便捷.靠谱.因为CentO ...
- 学习笔记之scikit-learn
scikit-learn: machine learning in Python — scikit-learn 0.20.0 documentation https://scikit-learn.or ...
- [UE4]Spacer
一.Spacer:留白占位控件 二.如下图所示,如果想要2个按钮都在容器右对齐: 三.可以放一个Spacer到最左边,设置成Fill,Spacer控件就是起到占位的作用.
- android查看屏幕密度,分辨率的shell命令
adb shell dumpsys window displays
- WPF Binding Mode,UpdateSourceTrigger
WPF 绑定模式(mode) 枚举值有5个1:OneWay(源变就更新目标属性)2:TwoWay(源变就更新目标并且目标变就更新源)3:OneTime(只根据源来设置目标,以后都不会变)4:OneWa ...
- Java选择排序,插入排序,快速排序
public class Test { public static void main(String[] args) { int a[] = { 1, 2, 3, 4, 5 }; 选择排序(a); ...