关于jQuery中click&live&on中的坑
click()方法:
click()方法针对未创建的元素不起作用,譬如用js传入的元素,所以可以使用live()方法来操作未创建的元素属性
live()方法:
$("button").live("click",function(){
$("p").slideToggle();
});
该方法在1.9版本被弃用了。
根据jQuery的官方描述,live方法在1.7中已经不建议使用,在1.9中删除了这个方法。并建议在以后的代码中使用on方法来替代。
on方法可以接受三个参数:事件名、触发选择器、事件函数。
需要特别注意的是:on方法中间的这个触发选择器就是你将要添加的HTML元素的类名、id或者元素名,使用它就可以实现live的效果。
例如我的html文档中已经有了一个id为parent的div,我将要在这个div内部再动态添加一个class为son的span,然后我为这个span绑定一个事件,那么我需要这样写:
$('#parent').on('click','.son',function(){alert('test')});
关于on()方法:
这里也需要注意一下:on()方法,要绑定到父级或者 body
并且$(#list')父级元素必须是已经创建了的元素(就是不是通过js传入的元素)
'#list' 为目标操作元素的父级元素(必须是已经存在元素) | 'click' 为需要操作的元素属性 | '.pure-u-3-4 a' 是目标操作元素
$('#list').on('click','.pure-u-3-4 a', function () {
alert("haha")
})
通过这样一番折腾,最终才能弹出haha
关于jQuery中click&live&on中的坑的更多相关文章
- [转]iOS Safari 中click点击事件失效的解决办法
iOS Safari 中click点击事件失效的解决办法 问题起因: 在微信公众号开发(微站)过程中用jquery的live方法绑定的click事件点击无效(不能执行) 问题描述 当使用委托给一个元素 ...
- Jquery中on绑定的一些小坑
---恢复内容开始--- 今天我们来说说关于JQuery中事件绑定中on绑定的一些小问题,直接上代码了,大家拷下去就可以用 <!DOCTYPE html> <html lang=&q ...
- JQuery归纳总结(增加中...)
一.this与$(this)的区别 this指向标签本身对象,而$(this)会将其封装成JQuery对象 如: $(" img").mousemove( function(e){ ...
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
- 【译】用jQuery 处理XML--浏览器中的XML与JavaScript
用jQuery 处理XML--写在前面的话 用jQuery 处理XML-- DOM(文本对象模型)简介 用jQuery 处理XML--浏览器中的XML与JavaScript 用jQuery 处理XML ...
- jQuery 互相调用iframe页面中js的方法
1,子iframe内调用父类函数方法: window.parent.func(); 2,子Iframe中获取父界面的元素: $("#xx", window.parent.docum ...
- Jquery和Javascript 实际项目中写法基础 (1)
一.JS 是什么,jquery 是什么 就不说明了,直接说一般使用是怎么样的 <!DOCTYPE html> <html> <head> <meta cha ...
- JQuery 在$(window).load() 事件中 不运行 $(window).resize()
本文转载至: http://stackoverflow.com/questions/2597152/jquery-window-resize-doesnt-work-on-load 原文标题 :J ...
- 自动化脚本中click()或sendKeys()没有反应
前提: 排除xpath引用错误或元素的xpath每次都不同的情形. 问题描述 自动化脚本中click()方法和sendKeys()方法报错, 返回异常InvocationTargetException ...
随机推荐
- 【设计模式】JDK源码中用到的设计模式
https://blog.csdn.net/angjunqiang/article/details/42061453 https://blog.csdn.net/baiye_xing/article/ ...
- pandas初识
pandas初识 1.生成DataFrame型的数据 import pandas as pd import numpy as np dates = pd.date_range('20130101',p ...
- Windows Azure Web Site (18) Azure Web App设置MIME
<Windows Azure Platform 系列文章目录> 在笔者之前的文章中,介绍了我们在使用Azure Web App,可以把静态资源保存到Azure Storage中: Wind ...
- <亲测>window+iis+letsencrypt+ssl 手动续期(通配符域名)
之前提到过 window环境下 生成ssl通配符域名证方法为:https://www.cnblogs.com/duanweishi/p/9491209.html 下文为在window环境下手动续 ...
- Device Tree碎碎念
首先推荐elinux.org上一篇关于Device Tree的文章: http://elinux.org/Device_Tree_Usage 这是一篇关于Device Tree的入门文章.对英文犯怵的 ...
- Notepad++ 中使用tail -f功能
想要notepad++中有tail -f的功能吗? 可以如下配置 Settings > Preferences > MISC 在 File Status Auto-Detection下 “ ...
- 关于socket阻塞与非阻塞情况下的recv、send、read、write返回值---部分内容可能不确切,待讨论
1.阻塞模式与非阻塞模式下recv的返回值各代表什么意思?有没有区别?(就我目前了解阻塞与非阻塞recv返回值没有区分,都是 <0:出错,=0:连接关闭,>0接收到数据大小,特别:返回值 ...
- bzoj3491: PA2007 Subsets
Description 有一个集合U={1,2,…,n),要从中选择k个元素作为一个子集A.若a∈A,则要有a*X不属于A,x是一个给定的数.求可选方案对M取模后的值. 1< = N< = ...
- 使用jquery.mCustomScrollbar自定义滚动条(4)live使用,向未来元素添加滚动条,不实用,了解一下
.div_box元素是本来没有的,在滚动条初始化的时候方法是加在$('.content .div_box').mCustomScrollbar()上面,参数live:on; 点击按钮的时候,进行con ...
- R语言 实验三 数据探索和预处理
计算缺失值个数 计算缺失率 简单统计量:计算最值 箱形图分析 分布分析:画出频率直方图 统计量分析:对于连续属性值,求出均值以及标准差 缺失值处理:删除法 去除 ...