我之前使用click()比较多,又来因为网页内容需要前端生成用了live().有的时候使用click()和bind()分不清楚该怎么试用.查了很多资料.测试了很多次,自己明白了.

总结如下:代码注释很详细,感觉不用在分段写了.都写在一起了.

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <a href="#">点击</a>

 <div class="box" style="cursor:pointer;">live</div>

 <div id="test"><a href="#">live支持链式编程吗?</a></div>

 <script type="text/javascript" src="js/jquery-1-8-3.js"></script>

 <script type="text/javascript">

     $(function(){

         $("<div class='box2' style='cursor:pointer;'>live</div>").appendTo("body");

     });

     $("a").click(function(){

         console.log("click");

     });

     /***

      *click()方法是bind()方法的一种简单方法.

      * 在bind()中, jQuery所有JavaScript事件对象, 比如focus, mouseover, resize, mousemove和mouseout,都可以作为type参数传递进来的.

      */

     var message = "left";

     $("a").bind("click",{ msg: message }, function(e) {

         console.log(e.data.msg);

         return false;

     });

     var message = "right";

     $("a").bind("contextmenu",{ msg: message }, function(e) { //contextmenu:鼠标右击与键盘的菜单触发键

         console.log(e.data.msg);

         return false;

     });

     /***

      * 这样当我们左键单击<a>时，输出"left";当右键单击<a>时，输出"right".

      */

     /***

      * live()给所有匹配的元素附加一个时间处理函数, 即使这个元素是以后添加进来的也有效.

      */

     $("div.box").bind("click", function() {

         console.log("success bind");

     });

     /***

      * 当点击class="box"为live时, 打印出success.

      * 此时,如果有新元素添加进来,该如何操作?

      * 这时, 当使用上边方法点击class为live的a标签时, 不会执行.

      * 原因:这个元素是在调用bind()之后添加的, 而使用live方法使得在后边添加的元素也能够执行相应的事件.

      */

     $("div.box2").live("click", function() {

         console.log("success live");

     });

     /***

      * live()方法不支持链式编程

      */

     $("#test").children("a").live("mouseover", function() {

         console.log("支持链式编程");//报错,不支持链式编程  Error: Syntax error, unrecognized expression: #test.children(a)

     });

     /***

      * 上面这种写法并不会输出, 我们这个时候可以使用delegate()

      */

     $("#test").delegate("a", "mouseover", function() {

         console.log("delegate");

     });

     /***

      * 这样就可以输出想要的结果.

      */

 </script>

 </body>

 </html>

click()、bind()、live()和delegate()方法的更多相关文章

  1. jQuery方法区别:click() bind() live() delegate()区别

    今天看到一篇jquery 事件的文章,自己写了个小例子,虽然2种方式都可以实现,但是不太明白,找了点资料 $("#box1").delegate("p",&qu ...

  2. jQuery方法区别(四)click() bind() live() delegate()区别

        click(),bind(),live()都是执行事件时使用的方法,他们之前是有一些区别的,我们在使用这些方法时应该根据需要进行选择. 1.click()方法是我们经常使用的单击事件方法: $ ...

  3. jQuery事件绑定on()、bind()与delegate() 方法详解

    jquery中有四种事件绑定函数,bind(),live(),on(),delegate(),由于live现在并不常用,因此不做过多解释. 1. bind()用法 $("div p" ...

  4. jQuery的.click,.bind,.unbind,.on,.off,.delegate,.undelegate

    .click与.bind .click和.bind都是给每个元素绑定事件,对于只绑定一个click事件,.bind事件的简写就是.click那种方式. 这两种方式都会出现两个问题: 第一个问题,如果要 ...

  5. Jquery揭秘系列：谈谈bind,one,live,delegate事件及实现

    在Jquery里面,我们用的最多的就是事件绑定了,事件绑定有多个函数.例如:bind,one,live,delegate等等. 我们先看看他们的定义,直接进入主题: bind( )方法用于将一个处理程 ...

  6. bind() live()和delegate 区别

    Event bubbling (aka event propagation)冒泡 我们的页面可以理解为一棵DOM树,当我们在叶子结点上做什么事情的时候(如click一个a元素),如果我们不人为的设置s ...

  7. jQuery 请指出'.bind()','.live()'和'.delegate()'的区别

    http://kb.cnblogs.com/page/94469/网上好多类似的 简言之bind可以绑定页面上已有的,live和delegate可以绑定到还未存在于页面中的元素之上.delegate又 ...

  8. Jquery揭秘系列：谈谈bind,one,live,delegate,on事件及实现

    在Jquery里面,我们用的最多的就是事件绑定了,事件绑定有多个函数.例如:bind,one,live,delegate,on等等. on() jQuery事件绑定.on()简要概述及应用 看源码发现 ...

  9. Jquery中bind(), live(), on(), delegate()四种注册事件的优缺点，建议使用on（）

    jquery中注册的事件,注册事件很容易理解偏差,叫法不一样.我第一反应就是如何添加事件,使用onclick之类的,暂时不讨论js注册事件的方法. 也看到园内前辈写过相关的帖子,但不是很详细,我找到了 ...

  10. jQuery中的bind(), live(), on(), delegate()

    当我们试图绑定一些事件到DOM元素上的时候,我相信上面这4个方法是最常用的.而它们之间到底有什么不同呢?在什么场合下用什么方法是最有效的呢? 准备知识: 当我们在开始的时候,有些知识是必须具备的: D ...

随机推荐

  1. python中快速获取本地时区当天0点时间戳的一种方法

    如下所示,看了网上的几种方法,这种方法算是代码量比较小的,同时可以保证求的是本地时区的0点时间戳,返回的是浮点数,需要的话自己转一下int In [1]: import time In [2]: fr ...

  2. 【转载】从零实现3D图像引擎：(1)环境配置与项目框架

    原文:从零实现3D图像引擎:(1)环境配置与项目框架 0. 要学懂3D程序设计,必然要精通3D相关的线性代数.3D几何.复分析等相关知识,我也因为如此才开始这个博客系列的写作,不自己实现,就不是自己的 ...

  3. 【LG4091】[HEOI2016/TJOI2016]求和

    [LG4091][HEOI2016/TJOI2016]求和 题面 要你求: \[ \sum_{i=0}^n\sum_{j=0}^iS(i,j)*2^j*j! \] 其中\(S\)表示第二类斯特林数,\ ...

  4. python字符串、列表、字典的常用方法

    一.python字符串的处理方法 >>> str = ' linzhong LongXIA ' >>> str.upper() #字符串str全部大写 ' LINZ ...

  5. SaltStack入门篇（三）之数据系统Grains、Pillar

    1.什么是Grains? Grains是saltstack的组件,用于收集salt-minion在启动时候的信息,又称为静态信息.可以理解为Grains记录着每台Minion的一些常用属性,比如CPU ...

  6. autoreleasepool 自动释放池的理解

    常见的面试题:以下代码存在什么样的问题?应该如何改进? for (int i = 0; i < 100000; i++) { NSString *str = @"abc"; ...

  7. Python中的内建函数（Built_in Funtions）

    前言 在Python官方文档的标准库章节中,第一节是简介,第二节就是Built_in Functions,可见内建函数是Python标准库的重要组成部分,而有很多内建函数我们平时却很少用到或根本就不知 ...

  8. mysql 数据库优化之执行计划(explain)简析

    数据库优化是一个比较宽泛的概念,涵盖范围较广.大的层面涉及分布式主从.分库.分表等:小的层面包括连接池使用.复杂查询与简单查询的选择及是否在应用中做数据整合等:具体到sql语句执行效率则需调整相应查询 ...

  9. 谈谈你对Java异常处理机制的理解

    先谈谈我的理解:异常处理机制可以说是让我们编写的程序运行起来更加的健壮,无论是在程序调试.运行期间发生的异常情况的捕获,都提供的有效的补救动作,任何业务逻辑都会存在异常情况,这时只需要记录这些异常情况 ...

  10. NO.1：自学python之路------Hello world、判断、循环

    引言 人工智能如今越来越贴近生活,在这里将记录我自学python与tensorflow的过程.编程使用IDE:visual studio 2017,python版本3.6.4,tensorflow版本 ...