jQuery_jquery의 .live() 메소드 사용에 대한 심층 분석

给jquery动态生成的页面元素添加事件？使用livequery插件，或可以使用jquery的live方法。摘录一段live简单使用方法。

更多详情还见官网 http://api.jquery.com/live/

live(type, [data],fn)

概述

jQuery给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。

这个方法是基本是的 .bind() 方法的一个变体。使用 .bind()时，选择器匹配的元素会附加一个事件处理函数，而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。比如说

Click here
 
可以给这个元素绑定一个简单的click事件：

$('.clickme').bind('click', function() {
 alert("Bound handler called.");     
}); 

当点击了元素，就会弹出一个警告框。

然后，想象一下这之后有另一个元素添加进来了。

$('body').append('
Another target
');

尽管这个新的元素也能够匹配选择器".clickme" ，但是由于这个元素是在调用 .bind() 之后添加的，所以点击这个元素不会有任何效果。

.live()就提供了对应这种情况的方法。如果我们是这样绑定click事件的：

$('.clickme').live('click', function() {
 alert("Live handler called.");      
});

然后再添加一个新元素：

$('body').append('
Another target
');

然后再点击新增的元素，他依然能够触发事件处理函数。 

事件委托

.live()方法能对一个还没有添加进DOM的元素有效，是由于使用了事件委托：绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。

传递给 .live()的事件处理函数不会绑定在元素上，而是把他作为一个特殊的事件处理函数，绑定在 DOM树的根节点上。在我们的例子中，当点击新的元素后，会依次发生下列步骤：

1、生成一个click事件传递给

来处理

2、由于没有事件处理函数直接绑定在

上，所以事件冒泡到DOM树上

3、事件不断冒泡一直到DOM树的根节点，默认情况下上面绑定了这个特殊的事件处理函数。

4、执行由 .live() 绑定的特殊的click 事件处理函数。

5、这个事件处理函数首先检测事件对象的target 来确定是不是需要继续。这个测试是通过检测 $(event.target).closest('.clickme')能否找到匹配的元素来实现的。

6、如果找到了匹配的元素，那么调用原始的事件处理函数。

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

附加说明

.live()虽然很有用，但由于其特殊的实现方式，所以不能简单的在任何情况下替换 .bind()。主要的不同有：

在jQuery 1.4中，.live()方法支持自定义事件，也支持所有的JavaScript 事件。在jQuery 1.4.1中，甚至也支持 focus 和 blue事件了（映射到更合适，并且可以冒泡的focusin和focusout上）。

另外，在jQuery1.4.1中，也能支持hover（映射到"mouseenter mouseleave"）。然而在jQuery1.3.x中，只支持支持的JavaScript事件和自定义事件：click, dblclick, keydown, keypress,keyup, mousedown, mousemove, mouseout, mouseover, 和 mouseup.

.live()并不完全支持通过DOM遍历的方法找到的元素。取而代之的是，应当总是在一个选择器后面直接使用 .live()方法，正如前面例子里提到的。

当一个事件处理函数用 .live()绑定后，要停止执行其他的事件处理函数，那么这个函数必须返回 false。 仅仅调用 .stopPropagation()无法实现这个目的。

参考 .bind() 方法可以获得更多关于事件绑定的信息。

在jQuery 1.4.1中，你可以一次绑定多个事件给 .live() ，跟.bind() 提供的功能类似。

在jQuery 1.4中，data参数可以用于把附加信息传递给事件处理函数。一个很好的用处是应付由闭包导致的问题。可以参考 .bind()的讨论来获得更多信息。

参数

typeString 이벤트 유형

data (선택 사항) Object 바인딩할 이벤트 핸들러 함수

fn Function 바인딩할 이벤트 처리 함수

예

HTML 코드:

클릭하세요!

jQuery 코드:
$("p").live("click", function(){
$(this).after("

또 다른 문단!

");
});

설명:

기본 이벤트 동작 및 이벤트 버블링을 방지하고 false를 반환합니다

jQuery 코드:
$("a").live("click", function() { returnfalse; });

설명:

기본 이벤트 동작만 방지

jQuery 코드:
$("a").live("click", function(event){
 event.preventDefault();
});

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

더보기

인기 기사

어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션

3 몇 주 전 By DDD

Windows 11 KB5054979의 새로운 기능 및 업데이트 문제를 해결하는 방법

2 몇 주 전 By DDD

Atomfall에서 크레인 제어 키 카드를 찾을 수 있습니다

3 몇 주 전 By DDD

R.E.P.O. 저축 설명 (및 파일 저장)

1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌

어 ass 신 크리드 섀도우 - 대장장이를 찾고 무기 및 갑옷 커스터마 화 잠금 해제 방법

4 몇 주 전 By DDD

더보기

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

더보기

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7569

15

Cakephp 튜토리얼

1386

52

Steam의 계정 이름 형식은 무엇입니까?

87

11

Win11 활성화 키 영구

61

19

NYT 연결 힌트와 답변

28

107

더보기