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中的坑的更多相关文章

  1. [转]iOS Safari 中click点击事件失效的解决办法

    iOS Safari 中click点击事件失效的解决办法 问题起因: 在微信公众号开发(微站)过程中用jquery的live方法绑定的click事件点击无效(不能执行) 问题描述 当使用委托给一个元素 ...

  2. Jquery中on绑定的一些小坑

    ---恢复内容开始--- 今天我们来说说关于JQuery中事件绑定中on绑定的一些小问题,直接上代码了,大家拷下去就可以用 <!DOCTYPE html> <html lang=&q ...

  3. JQuery归纳总结(增加中...)

    一.this与$(this)的区别 this指向标签本身对象,而$(this)会将其封装成JQuery对象 如: $(" img").mousemove( function(e){ ...

  4. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  5. 【译】用jQuery 处理XML--浏览器中的XML与JavaScript

    用jQuery 处理XML--写在前面的话 用jQuery 处理XML-- DOM(文本对象模型)简介 用jQuery 处理XML--浏览器中的XML与JavaScript 用jQuery 处理XML ...

  6. jQuery 互相调用iframe页面中js的方法

    1,子iframe内调用父类函数方法: window.parent.func(); 2,子Iframe中获取父界面的元素: $("#xx", window.parent.docum ...

  7. Jquery和Javascript 实际项目中写法基础 (1)

    一.JS 是什么,jquery 是什么  就不说明了,直接说一般使用是怎么样的 <!DOCTYPE html> <html> <head> <meta cha ...

  8. JQuery 在$(window).load() 事件中 不运行 $(window).resize()

    本文转载至: http://stackoverflow.com/questions/2597152/jquery-window-resize-doesnt-work-on-load 原文标题   :J ...

  9. 自动化脚本中click()或sendKeys()没有反应

    前提: 排除xpath引用错误或元素的xpath每次都不同的情形. 问题描述 自动化脚本中click()方法和sendKeys()方法报错, 返回异常InvocationTargetException ...

随机推荐

  1. dom实例,模态框,全选,反选,取消

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. System.Threading.Timer

    GLog.WLog("_thdTimer before"); _thdTimer = new System.Threading.Timer(new TimerCallback(Ti ...

  3. WPF Demo13通知项属性+数据绑定(代码层)

    <Window x:Class="BindingDemo1.MainWindow" xmlns="http://schemas.microsoft.com/winf ...

  4. Intellij IDEA神器值得收藏的小技巧

    概述 Intellij IDEA真是越用越觉得它强大,它总是在我们写代码的时候,不时给我们来个小惊喜.出于对Intellij IDEA的喜爱,我决定写一个与其相关的专栏或者系列,把一些好用的Intel ...

  5. Python selenium —— selenium与自动化测试成神之路

    From: https://blog.csdn.net/huilan_same/article/details/52559711 忽然想谈谈自动化的学习路径,因为发现很多人总是急于求成,不懂该如何学习 ...

  6. Wireshark抓包工具--TCP数据包seq ack等解读

    1.Wireshark的数据包详情窗口,如果是用中括号[]括起来的,表示注释,在数据包中不占字节 2.在二进制窗口中,如“DD 3D”,表示两个字节,一个字节8位 3.TCP数据包中,seq表示这个包 ...

  7. Scrapy学习篇(七)之Item Pipeline

    在之前的Scrapy学习篇(四)之数据的存储的章节中,我们其实已经使用了Item Pipeline,那一章节主要的目的是形成一个笼统的认识,知道scrapy能干些什么,但是,为了形成一个更加全面的体系 ...

  8. Quidway S系列交换机

    一. 华为交换机设备,以Quidway S系列命名,广泛适用于企业网.园区网和运营网络.Quidway S系列交换机包括: 接入层交换机 汇聚层交换机 核心层交换机 1.接入层交换机 包含两个系列: ...

  9. tpadmin导入数据库问题

    tpadmin导入数据库后,修改表名tp_web_log_all时报1168错误 原因:该为联合表,原始sql语句中的联合表tp_web_log_001未改变表名,必须修改后用sql语句添加该表

  10. 2018年1月 attribute VS prop 动画渲染

    attribute和prop和UI存在单向/双向绑定关系,参考 https://m.aliyun.com/yunqi/articles/31499 渲染流程 重绘和重排 ? requestAnimat ...