JQuery live函数

摘自 jQuery 1.4.1 中文参考：

事件委托

.live() 方法能对一个还没有添加进DOM的元素有效，是由于使用了事件委托：绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。传递给 .live() 的事件处理函数不会绑定在元素上，而是把他作为一个特殊的事件处理函数，绑定在 DOM 树的根节点上。在我们的例子中，当点击新的元素后，会依次发生下列步骤：

  1. 生成一个click事件传递给 <div> 来处理
  2. 由于没有事件处理函数直接绑定在 <div> 上，所以事件冒泡到DOM树上
  3. 事件不断冒泡一直到DOM树的根节点，默认情况下上面绑定了这个特殊的事件处理函数。
  4. 执行由 .live() 绑定的特殊的 click 事件处理函数。
  5. 这个事件处理函数首先检测事件对象的 target 来确定是不是需要继续。这个测试是通过检测 $(event.target).closest('.clickme') 能否找到匹配的元素来实现的。
  6. 如果找到了匹配的元素，那么调用原始的事件处理函数。

由于只有在事件发生时才会在上面的第五步里做测试，因此在任何时候添加的元素都能够响应这个事件

赞 (0)

相关推荐

  • 深入理解jQuery中live与bind方法的区别

    注意如果是通过jq添加的层和对象一定要用live(),用其他的都不起作用 live的缺点就是,运行完以后不释放空间,太多的使用会占用更多的内存,bind()则点击完以后释放空间 区别一: Click here 可以给这个元素绑定一个简单的click事件: $('.clickme').bind('click', function() {$('body').append(' Another target');}); 当点击了元素,就会弹出一个警告框.然后,想象一下这之后有另一个元素添加进来了. 尽管

  • jQuery中.live()方法的用法深入解析

    给jquery动态生成的页面元素添加事件?使用livequery插件,或可以使用jquery的live方法.摘录一段live简单使用方法. 更多详情还见官网http://api.jquery.com/live/ live(type, [data],fn) 概述 jQuery给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效. 这个方法是基本是的 .bind() 方法的一个变体.使用 .bind()时,选择器匹配的元素会附加一个事件处理函数,而以后再添加的元素则不会有.为此

  • jQuery中live方法的重复绑定说明

    解决:使用die()方法,在live()方法绑定前,将此元素上的前面被绑定的事件统统解除,然后再通过live()方法绑定新的事件. 复制代码 代码如下: //先通过die()方法解除,再通过live()绑定 $("#selectAll").die().live("click",function(){ //事件运行代码 }); die()方法简介: 复制代码 代码如下: die([type], [fn])<SPAN style="WHITE-SPACE

  • Jquery绑定事件(bind和live的区别介绍)

    Jquery中绑定事件有三种方法:以click事件为例 (1)target.click(function(){}); (2)target.bind("click",function(){}); (3)target.live("click",function(){}); 第一种方法很好理解,其实就和普通JS的用法差不多,只是少了一个on而已 第二.三种方法都是绑定事件,但是二者又有很大的不同,下面着重讲解一下,因为这个如果用到Jquery的框架的话是用的挺多的,尤其要

  • jquery常用函数与方法汇总

    1.delay(duration,[queueName]) 设置一个延时来推迟执行队列中之后的项目. jQuery 1.4新增.用于将队列中的函数延时执行.他既可以推迟动画队列的执行,也可以用于自定义队列. duration:延时时间,单位:毫秒 queueName:队列名词,默认是Fx,动画队列. 例: 头部与底部延迟加载动画效果 $(document).ready(function() { $('#header') .css({ 'top':-50 }) .delay(1000).anima

  • 模仿JQuery.extend函数扩展自己对象的js代码

    但在写的过程中发现,如果要在之前写好的对象中添加新的静态方法或实例方法,要修改原有的对象结构,于是查看了jquery了extend方法,果然extend方法支持了jq的半边天,拿来主义,给自己的对象做扩张用. 下面进入正题: 假如有以下一个对象 复制代码 代码如下: var MyMath = { //加法 Add: function(a, b){ return a + b; }, //减法 Sub: function(a, b){ return a - b; } } 对象名MyMath,有两个静

  • 浅谈Jquery核心函数

    在Jquery中,所有的DOM对象都将封装成Jquery对象,而且只有Jquery对象才能使用Jquery方法或者属性来执行相应的操作. 所以Jquery提供了一个可以将DOM对象封装成Jquery对象的函数,就是Jquery核心函数jquery(),也称为工厂函数. jquery核心函数有7个重载,分别如下: jquery()  该函数返回一个空的jquery对象. jquery(elements)  该函数将一个或多个DOM元素转化为Jquery对象(或jquery集合) jquery(ca

  • jquery遍历函数siblings()用法实例

    本文实例讲述了jquery遍历函数siblings()用法.分享给大家供大家参考,具体如下: siblings([expr]) 得到所有匹配元素集合中各个元素的所有兄弟元素集合.返回匹配元素集合 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> &l

  • jQuery 回调函数（callback）的使用和基础

    还是先贴代码吧 复制代码 代码如下: <!DOCTYPE html> <html>     <head>         <meta charset="utf-8">         <title></title>         <script src="js/jquery.js"></script>     </head> <style> bo

  • jQuery 遍历函数详解

    jQuery 遍历函数包括了用于筛选.查找和串联元素的方法. 函数 描述 .add() 将元素添加到匹配元素的集合中. .andSelf() 把堆栈中之前的元素集添加到当前集合中. .children() 获得匹配元素集合中每个元素的所有子元素. .closest() 从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素. .contents() 获得匹配元素集合中每个元素的子元素,包括文本和注释节点. .each() 对 jQuery 对象进行迭代,为每个匹配元素执行函数. .end(

  • jQuery 自定义函数写法分享

    自定义主要通过两种方式实现$.extend({aa:function(){}});$.fn.extend({aa:function(){}});调用的方法分别是:$.aa();$($this).aa(); 注意:创建函数时不要放在 $(function() { }中,调用时候要放在事件里面$($this).click(function(){$.aa();}); jQuery.extend 函数详解JQuery的extend扩展方法:Jquery的扩展方法extend是我们在写插件的过程中常用的方

  • 逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)

    首先给大家介绍jquery data()函数 jQuery中data()函数用于向被选元素附加数据,或者从被选元素获取数据.通过data()函数存取的数据都是临时数据,一旦页面刷新,之前存放的数据都将不复存在. 一.jquery data()的作用 data() 方法向被选元素附加数据,或者从被选元素获取数据. 通过data()函数存取的数据都是临时数据,一旦页面刷新,之前存放的数据都将不复存在. 该函数属于jQuery对象(实例).如果需要移除通过data()函数存放的数据,请使用 remov

  • JQuery核心函数是什么及使用方法介绍

    JQuery核心函数是什么及使用方法介绍

    jquery对于一个程序员来说,或多或少都听过.相信很多人在项目中也都用过.现在也有很多开源的库都是依赖于jQuery,因此熟悉jQuery还是很有必要的.使用熟练的大神可以简单看看,对于小白来说还是纯纯的干货.熟悉jQuery还是先从核心函数入手比较好,后面其他的功能都是在此核心函数的基础上扩展的. jQuery 核心函数 jQuery(expression, [context]) jQuery(html, [ownerDocument]) jQuery(html, props) jQuery

  • 一个超简单的jQuery回调函数例子(分享)

    jQuery回调函数简单使用 比如说,我们想要点击某个按钮后触发事件, 先把一些指定内容给隐藏掉, 然后跳出相关信息的对话框. 如果使用普通的方法, 不用回调函数的话, 会有怎么样的效果呢? 效果是先弹出对话框再隐藏内容, 然后再隐藏指定内容. 这显然不是我们想要的效果, 如果使用回调函数,就可以解决这个问题. 当然,回调函数功能远不只这么简单-- 具体的代码如下: <%@ page language="java" import="java.util.*" p

随机推荐