.on 함수와 .each 함수로 jQuery를 사용하는 방법

Question

각 함수를 jQuery를 사용하여 현재의 $ (this)를 클릭하면 JS 코드가 실행됩니다. 다음 코드를 보면 더 명확합니다.

$('.switch-cal').each(function(){ 
    $(this).on('click', function(e){ 
     .... CODE HERE .... 

".each"기능을 ".each"기능으로 사용하는 올바른 방법 "this"를 알려주십시오.

감사합니다.

Answer 1

1. 짧은 답변 : each 필요가 없습니다 :

이 each의 내부 click를 사용하지 마십시오가 ... 당신은 jQuery로 할 필요가 없습니다. 대부분의 작업 (이벤트 핸들러 포함)을 위해 자동으로 컬렉션을 처리합니다.

$('.switch-cal').click(function(){ 
    //$(this) is the calendar clicked 
     .... CODE HERE .... 

2. 것은 위임 핸들러를보십시오 :

그것은이다 것도 편리하지 않는 경우 하나의 위임 이벤트 가장 가까운 비 변화 조상 요소에 첨부 핸들러 (또는 document를 사용하는 것이 종종 더 편리). 위임 된 이벤트의 가장 큰 특징은 아직 존재하지 않는 요소에 대해 작업 할 수 있다는 것입니다. :)

버블 체인의 요소에 선택기를 적용하기 만하면되므로 런타임 오버 헤드가 매우 낮습니다. 초당 50,000 마우스 조작을 처리하지 않는 한 속도 차이는 무시할 수 있으므로 마우스 이벤트의 경우 비효율에 대한 우스꽝스러운 주장 (예 : 아래 유권자의 맹공격과 같이)을 수행하지 마십시오. 일반적으로 여분의 오버 헤드가 발생하지 않는 이점이 있습니다. 아무도 초당 50,000 회 클릭하지 않습니다! :

$(document).on('click', '.switch-cal', function(){ 
    //$(this) is the calendar clicked 
     .... CODE HERE .... 

위임 이벤트 (이 경우 click에서) 이벤트를 수신 비 변화 조상 요소에 DOM을 버블 링에 의해 작동합니다. 다음 선택기가 적용됩니다. 이면은 이벤트를 일으키는 요소가 일치하는 의 함수를 호출합니다.

변경되지 않은 요소가 문제의 요소에 가까울수록 필요한 테스트 수가 줄어들지 만 더 편리한 것이 없으면 document은 폴백입니다. body을 사용하지 마십시오. 스타일과 관련된 문제로 인해 이벤트가 실행되지 않을 수도 있습니다.

Answer 2

@TrueBlueAussie가 정답을 가졌습니다. 단일 위임 이벤트를 사용해야합니다. $(document).on('click', '.switch-cal', function(){ //$(this) is the calendar clicked .... CODE HERE ....

아직도 당신은 할 수있다 JQuery와의

$('.switch-cal').each(function(){ $(this).on('click', function(e){ .... CODE HERE .... }.bind(this)) });