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元素注册事件或者触发回调 ...
随机推荐
- IntelliJ IDEA创建maven多模块项目
创建完成后的目录结构如下: 一.项目主要分成3个模块,yves-parent为父模块,yves-dao和yves-web(webapp类型的模块)为子模块. 二 .Parent Project,创建y ...
- Xshell添加ssh隧道SOCKS代理
Xshell是一个功能强大的终端模拟器,支持SSH,SFTP.TELNET.RLOGIN和SERIAL 下载地址:http://www.netsarang.com/products/xsh_overv ...
- The problems when using a new ubuntu 18.04
how to install dual systems (windows & ubuntu) Donwloading the ubuntu from web. Using refu to cr ...
- html笔记汇总
<html lang="en-us"> HTML标签的lang属性(language)指定当前页面所使用的自然语言,如zh.zh-cn.zh-tw.zh-hk.en.e ...
- Spark流处理调优步骤
总体运行状况: 这里的每个批处理任务间隔是10s一次,所以Total Delay是14s,那么对于下一个批处理任务来说就是延迟了14 - 10 = 4s . Total Delay - 每个批处 ...
- Linux之cp、rm、mv
cp.rm.mv 命令功能: 复制文件或目录 命令格式: cp [OPTION]... [-T] SOURCE DEST cp [OPTION]... SOURCE... DIRECTORY cp [ ...
- [转]ANTS Performance Profiler和ANTS Memory Profiler 使用
.NET性能调优之一:ANTS Performance Profiler的使用 .NET性能调优系列文章 系列文章索引 .NET性能调优之一:ANTS Performance Profiler的使 ...
- 3、PHP中常用的数据库操作函数解析
mysql_connect 连接数据库 mysql_select_db 选择需要操作的数据库 mysql_query 执行数据库操作语句 mysql_fetch_array 以数组的形式返回每行查询 ...
- c++11 tuple实现
实现一个简易版的c++11 tuple. 我使用的编译器是gcc,codeblocks13.12自带的,哪个版本我不熟gcc也没去查. 大致看了下他家的tuple实现,多继承,tuple之上还有2个辅 ...
- 获得驱动器信息卷设备&&Ring3得到磁盘文件系统(NTFS WIN10)
// GetLogicalDriveStrings.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <Windows ...