jquery live()_jquery의 반복 바인딩 솔루션 소개

Query中.live()方法的使用方法

今天在写代码的时候遇到一个问题，直接上代码看：
$(function(){
           $(".file").live("click",function(){
                    var task_name=$(this).text();
                    $("#selecting tbody").append(""+task_name+"");     
           });  
    });

$(".file")对象是从后台传过来的，click肯定是不行的，bind（）也无法获取动态添加的元素，因此只能用live（），但是使用live（）遇到的问题是表格行会莫名其妙的添加了两行，即绑定事件重复执行了，纠结了一上午终于找到了原因，先看live()方法的介绍。

live(type, [data],fn)

概述

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

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

Clickhere

可以给这个元素绑定一个简单的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('Anothertarget');

그런 다음 새로 추가된 요소를 클릭해도 이벤트 핸들러 기능을 실행할 수 있습니다.

이벤트 대표

.live() 메서드는 이벤트 위임 사용으로 인해 아직 DOM에 추가되지 않은 요소에 대해 작동합니다. 상위 요소에 바인딩된 이벤트 핸들러는 하위 항목에서 트리거된 이벤트에 응답할 수 있습니다.

.live()에 전달된 이벤트 핸들러는 요소에 바인딩되지 않지만 특수 이벤트 핸들러로 처리되어 DOM 트리의 루트 노드에 바인딩됩니다. 이 예에서는 새 요소를 클릭하면 다음 단계가 발생합니다.

1. 클릭 이벤트를 생성하고

에 전달하여 처리합니다.

2.

에 직접 바인딩된 이벤트 처리 기능이 없으므로 이벤트가 DOM 트리까지 버블링됩니다.

3. 이벤트는 기본적으로 DOM 트리의 루트 노드까지 버블링됩니다.

4. .live()에 바인딩된 특수 클릭 이벤트 처리 기능을 실행합니다.

5. 이 이벤트 처리 기능은 먼저 이벤트 개체의 대상을 감지하여 계속해야 하는지 여부를 결정합니다. 이 테스트는 $(event.target).closest('.clickme')가 일치하는 요소를 찾을 수 있는지 확인하여 구현됩니다.

6. 일치하는 요소가 발견되면 원래 이벤트 처리 함수를 호출합니다.

위 5단계의 테스트는 이벤트가 발생할 때만 테스트되므로, 언제든지 추가되는 요소는 이 이벤트에 응답할 수 있습니다.

추가 참고사항

.live()는 유용하지만 특별한 구현으로 인해 어떤 상황에서도 단순히 .bind()를 대체할 수는 없습니다. 주요 차이점은 다음과 같습니다.

jQuery 1.4에서 .live() 메서드는 맞춤 이벤트와 모든 JavaScript 이벤트를 지원합니다. jQuery 1.4.1에서는 포커스 및 파란색 이벤트도 지원됩니다(더 적절하고 버블링되는 포커스인 및 포커스아웃에 매핑됨).

또한 jQuery1.4.1에서는 hover("mouseenter mouseleave"에 매핑됨)도 지원됩니다. 그러나 jQuery 1.3.x에서는 지원되는 JavaScript 이벤트와 사용자 정의 이벤트(click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover 및 mouseup)만 지원됩니다.

.live()는 DOM 순회를 통해 발견된 요소를 완전히 지원하지 않습니다. 대신, 이전 예제에서 언급한 것처럼 항상 선택기 바로 다음에 .live() 메서드를 사용해야 합니다.

이벤트 처리 함수가 .live()와 바인딩되어 있고 다른 이벤트 처리 함수의 실행을 중지하려면 이 함수가 false를 반환해야 합니다. .stopPropagation()을 호출하는 것만으로는 이 목적을 달성할 수 없습니다.

이벤트 바인딩에 대한 자세한 내용은 .bind() 메서드를 참조하세요.

jQuery 1.4.1에서는 .bind()에서 제공하는 기능과 유사하게 여러 이벤트를 .live()에 한 번에 바인딩할 수 있습니다.

jQuery 1.4에서는 data 매개변수를 사용하여 이벤트 핸들러 함수에 추가 정보를 전달할 수 있습니다. 클로저로 인해 발생한 문제를 처리하는 것이 좋습니다. 자세한 내용은 .bind() 토론을 참조하세요.

매개변수

typeString 이벤트 유형

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

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

예

HTML 코드:

클릭하세요!

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

다른 단락!< ;/p>");
});

설명:

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

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

//근본 원인은 여기에 있습니다. 기본 이벤트 동작과 이벤트 버블링을 방지해야 하며, 코드 뒤에 return false를 추가하면 괜찮습니다.

설명:

기본 이벤트 동작만 방지

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