jQuery 이벤트 위임 1.7.2

Question

$(document)에서 위임하는 것 외에 선택기와 일치하는 페이지의 모든 요소에 해당하는 jQuery를 사용하여 이벤트를 위임 할 수있는 방법이 있습니까? 선택기를 일치하는 모든 요소에 이벤트를 위임 jQuery.live로

을 사용할 :

은 아마 가난하게 말로 이후로, 여기에 문질러입니다. 이것은 jQuery.delegate에 의해 대체되었는데, 특정 컨텍스트 선택기 내의 이벤트를 자식에게 위임했습니다. 실제로는 jQuery.on으로 대체되었지만 사실상 동일한 작업을 수행하지만 장면 뒤에서는 다른 비트를 사용했습니다 (상상해보십시오).

내가 원하는 것은 내 페이지의 모든 div.foo에 안전하게 이벤트 처리기를 추가합니다.이 이벤트 처리기는 어디에 살릴지 또는 언제 살릴 수 있는지에 관계없이 안전하게 추가됩니다. 설명서 및 경험적 연구에 따르면 다음은 스크립트가 실행될 때 존재하는 요소 인 .foo에만 바인딩됩니다. 나중에 .foo 요소를 페이지에 배치 할 수있는 코드가 있기 때문에 이것이 올바르게 작동하지 않습니다. live 이후

jQuery('.foo').on('click', handler); 

은 (아마도 제거?)는 지원되지 않습니다, 나는 그것을 사용하지하기 위해 노력하고있어,하지만 내가 가지고 올 수있는 유일한 해결책은

jQuery(document).on('click', '.foo', handler); 

입니다하지만 live이 아니다 원래, 뒤에서 했나요? 요점을 더, 어떤 중요한 이유가 있습니까 이렇게하려면?

우리는 특별히 1.7.2 버전을 사용하고 있지만 일반적인 jQuery 응답도 도움이 될 것입니다. 그렇지 아주 성능이 좋은 때문에이 나쁜

jQuery(document).on('click', '.foo', handler); 

그 이유는 다음과 같습니다

Answer 1

이벤트가 소스에서 버려지고 위임 된 항목이되므로 jquery()를 사용해야합니다. 가장 낮은 수준의 공통 상위 항목. 그것이 문서라면, 그렇게 될 것입니다.

그렇지 않으면 .foocontainer (또는 무언가) 내에 항상 .foo 개의 항목이 만들어지면 그 중 하나 이상이 있어도 선택기에서 사용할 수 있습니다. 연결 만하면 끝납니다.

문서로 위임하는 문제는 잠재적으로 이벤트가 많은 시간 동안 버블 링되어야하므로 프로세스에서 추가 오버 헤드가 발생하므로 소스에 가능한 한 가까운 이벤트를 위임하는 것이 가장 좋습니다.

Answer 2

당신은 live()이 바로 이러한 작업을 수행하는 것입니다 (아래) 문서에 결합한다는 점에서 정확합니다. 클릭 할 때마다 document은 위임 된 요소에 있는지 확인합니다.

더 나은 방법은 document 대신 동적으로 추가되는 요소에 가장 가까운 상위 요소를 사용하는 것이지만 페이지로드시 사용할 수 있습니다. 이것이 최상위 컨테이너 일지라도 모든 것을 첨부하는 것보다 성능 이점을 여전히 제공합니다 document.