새로 고침 또는 live() (jQuery) 이후에 바인딩하는 것이 더 낫습니다.

Question

컨테이너를 AJAX로 업데이트합니다. 성능 측면에서 어느 것이 더 낫습니까? 의사 코드 :

$.post('get_something.php',function(data){ 
    $('#container').html(data).find('a').bind('click',function(){ 
     console.log('Doh!'); 
    }); 
}); 

또는이?

$('#container a').live('click',function(){ 
    console.log('Doh!'); 
}); 

$.post('get_something.php',function(data){ 
    $('#container').html(data); 
}); 

Answer 1

(그리고 JQuery와 팀은 사용되지 않는 한). delegate (또는 on의 새 버전)을 문서 전체보다 더 타겟팅 된 컨테이너 (귀하의 경우 #container)와 함께 사용하겠습니다.

이렇게하면 클릭 타임의 실적이 아무런 차이가 없도록 거의 비슷해집니다 (여기에서 사용자 생성 이벤트를 처리하고 있습니다. 밀리 초의 이상한 커플은 전혀 신경 쓰지 않습니다) .

(고려해야 할 다른 고려 사항이 있습니다. 처음에 의해 처리 될 a이 깊은 요소이기 때문에

$("#container").delegate('a', 'click', function() { 
    // Do something with the click 
    console.log("Link was clicked"); 
}); 
$("#wrapper").click(function() { 
    return false; 
}); 

, 당신은 a에 클릭을 기대 :

<div id="container"> 
    <div id="wrapper"> 
     <a>A link</a> 
    </div> 
</div> 

...이 코드 : 우리는이 마크 업이 있다고 가정 처리기를보고 console.log 항목을 확인하십시오. 그러나 실제로 클릭이 컨테이너   —에 도달 할 때까지 실제로 처리되지 않으므로이 경우 클릭이 이벤트를 중지하기 때문에 컨테이너에 도달하지 않습니다.

음수가 아닙니다. (나는 항상 delegate을 유용하게 사용하며 항상 사용합니다), 당신이 어떻게 사물을 다루는 지 설계 할 때 고려해야 할 사항입니다.

Answer 2

두 가지 중 첫 번째 옵션입니다. 그러나 둘보다 더 나은 내가 전혀 live를 사용하는 것이 좋습니다 않을 것이다, 첫째 delegate()

$("#container").delegate(".filter", "click", function() { 
    // do something on click of .filter element. 
}); 

Answer 3

FYI 그것은

"결국

는, 바인드 너무 명확하고 더 직접적인 것 같습니다하지 않는 상태 글쎄, 바인딩 우리가 대리자를 선호하거나 사는 2 가지 이유가 있습니다 :

• 은 DOM에 아직 존재하지 않을 수있는 DOM 요소에 핸들러를 첨부하려면 바인드는 개별 요소에 핸들러를 직접 바인딩하기 때문에 은 페이지에없는 요소에 바인드 할 수 없습니다. 을 $ 'a'). bind (...), 그리고 새로운 링크가 AJAX를 통해 페이지를 열면 바인드 처리기가 작동하지 않습니다. live이고 대리인은 다른 조상 노드에 바인딩되므로 은 현재 또는 미래의 해당 요소에 대해 상위 요소에 대해 작동합니다.

• 또는 단일 요소 또는 하위 구성 요소에 대한 이벤트를 수신 요소 소그룹에 핸들러를 연결하는 대신 를 통해 반복하고 DOM 100 개 개인 요소와 동일한 기능을 부착.이는 페이지의 모든 요소에 핸들러를 직접 연결하는 대신 하나의 조그만 조상 요소 ( )에 핸들러를 연결하면 성능이 향상됩니다. "

answer source