배열을 루프 처리하고 jQuery 클릭 이벤트를 추가하는 방법은 무엇입니까?

Question

간단한 배열을 반복하고 배열 값을 기반으로 요소를 찾은 다음 각 요소에 click 이벤트를 추가하려고합니다. 어떤 이유로 (범위와 관련이 있을지도 모름) 모든 이벤트는 배열의 끝에 있다고 생각합니다.

예 HTML :

<!-- "Sectors" --> 
<div class="a">a</div> 
<div class="b">b</div> 
<div class="c">c</div> 

해당 자바 스크립트 : 어떤 사업부를 클릭하면

var sectorArray = ["a", "b", "c"]; 
// Loop over sector letters 
for (var s in sectorArray) { 
    var sector = sectorArray[s]; 
    console.log("Adding click event for sector: " + sector); 
    $('div.' + sector).on("click", function(e){ 
     console.log("Clicked sector: " + sector); 
    }); 
} 

, 내가 부문 "C"에 해요 메시지가 표시됩니다. 여기에 jsfiddle가 있습니다 : http://jsfiddle.net/luken/Pd66m/

for 루프 내부의 모든 것을 자체적으로 분리 된 기능으로 만들어서 문제를 해결할 수있었습니다. 다른 해결책이 있습니다 ... 그러나 나는 알아 내고 싶습니다. 왜 이것이 위의 방식으로 작동하지 않을까요? 감사.

Answer 1

폐쇄 문제와 알려진 문제이며, 이것을 시도. 루프 값을 "동봉"하기 위해 익명의 함수를 추가했습니다. 이 가지 않도록 내부 s가 '공유'하지 않고 각 루프 사이클은 자신의 복사본을해야합니다

for (var s in sectorArray) { 
    (function(s){ //This line creates a 'per loop cycle' s var 
     var sector = sectorArray[s]; 
     console.log("Adding click event for sector: " + sector); 
     $('div.' + sector).on("click", function(e){ 
      console.log("Clicked sector: " + sector); 
     }); 
    })(s); //Calls the function 
} 

이 방법 :

var sectorArray = ["a", "b", "c"]; 
// Loop over sector letters 
    for (var s in sectorArray) { 
    var sector = sectorArray[s]; 
    (function(sec){ 
     $('div.' + sec).on("click", function(e){ 
     console.log("Clicked sector: " + sec); 
     }); 
    }(sector)) 
} 

Answer 2

그것은 using closure in a loop

$.each(sectorArray, function (i, sector) { 
    console.log("Adding click event for sector: " + sector); 
    $('div.' + sector).on("click", function (e) { 
     $selection.html(sector); 
     console.log("Clicked sector: " + sector); 
    }); 
}) 

Answer 3

순수 JS와 또 다른 방법, 클로저를 추가하여 덮어 쓴.

희망이 도움이됩니다. 건배

당신은 또한 이벤트 핸들러 함수를 반환하는 함수를 만들 수 있습니다

Answer 4

은 부문에서 통과 같은 즉시 실행합니다

$('div.' + sector).on("click", 
    function(sec){ 
    return function(e) { 
     console.log("Clicked sector: " + sec); 
    }; 
    }(sector) 
);