jQuery on() selector

Question

selector의 목적은 jQuery on() 메서드에서 무엇입니까? 어떤 상황에서

는

$("#fish").find(".button").on("click", function() { 
    // something 
}); 

$("#fish").on("click", ".button", function() { 
    // something 
}); 

말보다 낫다?

나는 jQuery documention에 고개 발견했습니다 선택기가 생략되거나 null의 경우

는

, 이벤트 핸들러로 직접 또는 직접 바인딩이라고합니다. 핸들러는 요소에서 직접 발생하거나 하위 요소 (내부)에서 발생하는 거품과 같은 선택된 요소에서 이벤트가 발생할 때마다 호출됩니다.

선택기가 제공되면 이벤트 처리기는 위임 된 것으로 간주됩니다. 이벤트가 바운드 요소에서 직접 발생하지만 선택기와 일치하는 하위 항목 (내부 요소)에 대해서만 발생하면 처리기가 호출되지 않습니다. jQuery는 이벤트 대상에서 이벤트 처리기가 연결된 요소 (즉, 가장 안쪽에서 가장 바깥 쪽 요소)까지 이벤트를 버블 링하고 선택기와 일치하는 해당 경로를 따라 핸들러를 실행합니다. 내 말에 수정

오전의 차이는 내 첫 번째 예에서 이벤트가 #fish 바인딩되는,하지만 두 번째 예제에서 이벤트가 결합되는 반면에만 .buttons에서 버블 링 이벤트를 수신하는 .buttons 각각? 그렇다면 이것의 의미는 무엇입니까? : S

이벤트가 #fish에 바인딩되어있는 경우 .button을 클릭하면 클릭 한 .button을 알 수 있습니까? 이것은 .button 대신 #fish를 참조 할 것입니다. 맞습니까?

Answer 1

예 1은 #fish의 자손 인 경우 동적으로 생성 된 버튼의 이벤트를 바인딩합니다. 바인딩 후에 생성 된 버튼에는 클릭 핸들러가 호출됩니다. 조상 요소를 선택하지 않으려면 $(document)에 바인딩 할 수도 있습니다.

예제 # 2는 바인딩 할 때 DOM에있는 버튼에만 바인딩됩니다. 동적으로 생성 된 요소는 핸들러를 수신하지 않습니다.

두 예의 경우 this과 $(this)은 #fish이 아니라 클릭 한 버튼을 나타냅니다.

데모를 보려면 jsFiddle을보십시오.콘솔에서 this은 #fish이 아닌 버튼을 나타냅니다.

$('#fish').on('click', '.button', function(){ 
    console.log(this.id); 
}); 

Answer 2

네, 맞습니다. 선택기를 사용하여 on 메서드를 호출하면 위임 된 이벤트가 만들어집니다.

$("#fish").delegate(".button", "click", function() { 

이벤트가 #fish 요소에 결합되어 있지만, 그것은 단지 .button 요소의 클릭에 대한 이벤트 처리기를 호출

$("#fish").on("click", ".button", function() { 

같은은 다음과 같이한다. 즉, 요소를 바인딩 할 때 .button 요소가 존재하지 않아도되고 #fish 요소 만 존재해야합니다.