.on (이 참조)을 사용하는 jQuery 이벤트 위임

Question

위임 된 .on 이벤트에서이 참조는 어디에서 참조됩니까? 예 :이 #foo로 참조합니다 예에서는

$('#foo').on('click', $('.bar'), function() { 
    console.log(this); 
}); 

. 하지만 클릭 한 막대 요소에 어떻게 액세스합니까? 5 개의 막대 요소가있을 수 있으며 클릭 한 요소를 알고 싶습니다.

감사

편집 : 나는 (그것을 여러 번 존재하기 때문에) .bar 인 할 #bar을 변경 죄송합니다.

'.bar'를 사용해야하는 대답이 도움이되었습니다. 하지만 다음과 같은 선택자가있는 경우 :

$('.bar').find('a'); 

어떻게 이런 식으로 통합 할 수 있습니까?

이 작동하지 않습니다 : (#foo에 참조 할 것이 원인)이에

$('#foo').on('click', $('.bar').find('a'), function() { 
    console.log(this); 
}); 

Answer 1

변경을 ...

$('#foo').on('click', '.bar', function() { 
    console.log(this); 
}); 

지금 this가 클릭 .bar 될 것입니다.

jQuery 객체를 원하면 $(this)을 정상적으로 사용하십시오. 단순히 존재하지 않을 수 .bar 요소 내부 링크에 클릭 이벤트 핸들러를 확장

편집

코드를 질문의 변화에 ​​따라, 당신이 필요합니다 ...

$('#foo').on('click', '.bar a'), function() { 
    console.log(this); 
}); 

document.ready에.

Answer 2

ID는 페이지에서 한 번 사용해야합니다. 그래서 당신은 당신의 5 개 요소에 클래스 fooClass를 추가 할 수 있습니다

$('.fooClass').onclick(function() { 
    alert("my bar element: " + $(this)); 
}); 

을하고 $(this)으로 원하는 것을 할.

Answer 3

두 가지 방법.

$('#foo').on('click', '#bar', function() { 
    console.log(this); // #bar 
}); 

가 jQuery를 정규화 이벤트 개체의 매개 변수 이름을 지정하고 그 target 속성을 사용합니다 :

1. .on()를 호출 할 때 문자열 선택이 아닌 jQuery를 객체를 사용

   $('#foo').on('click', $('#bar'), function(e) { 
       console.log(this); // #foo 
       console.log(e.target); // #bar 
   }); 
   

   을

편집 : 두 번째 옵션을 무시하십시오. jQuery는 선택기에 대한 jQuery 객체를 허용하지 않으므로 결과적으로 무시됩니다.이이 아닌 이벤트 위임을 설정하는 경우, 이벤트 전파로 인해 작동하는 #foo에 정적 click 이벤트 처리기를 설정하는 것입니다.