for 루프에서 클릭 핸들러 할당

for 루프에서 클릭 핸들러 할당

---

나는 몇 사업부의가 있어요 #mydiv1, #mydiv2, #mydiv3, ... 그리고 그들에게 할당 클릭 핸들러 원하는 :

$(document).ready(function(){
  for(var i = 0; i < 20; i++) {
    $('#question' + i).click( function(){
      alert('you clicked ' + i);
    });
  }
});

그러나 'you clicked 3'클릭 할 때 표시 되는 대신 #mydiv3(다른 모든 클릭에 대해) 'you clicked 20'. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

---

자바 스크립트 에서 루프 에 클로저 를 만드는 것은 흔한 실수 입니다. 다음과 같은 일종의 콜백 함수가 필요합니다.

function createCallback( i ){
  return function(){
    alert('you clicked' + i);
  }
}

$(document).ready(function(){
  for(var i = 0; i < 20; i++) {
    $('#question' + i).click( createCallback( i ) );
  }
});

---

2016 년 6 월 3 일 업데이트 : 이 질문이 여전히 관심을 끌고 있고 ES6도 인기를 얻고 있으므로 현대적인 솔루션을 제안합니다. ES6를 작성하는 경우 let키워드를 사용하여 i변수를 전역 대신 루프에 로컬로 만들 수 있습니다 .

for(let i = 0; i < 20; i++) {
  $('#question' + i).click( function(){
    alert('you clicked ' + i);
  });
}

더 짧고 이해하기 쉽습니다.

---

명확히하기 위해, 클릭 이벤트는 루프가 끝날 때까지 실행되지 않기 때문에 i는 20입니다.

---

$(document).ready(function(){
  for(var i = 0; i < 5; i++) {
   var $li= $('<li>' + i +'</li>');
      (function(i) {
           $li.click( function(){
           alert('you clicked ' + i);
         });
      }(i));
      $('#ul').append($li);
  }
});

---

클릭 핸들러를 한 번 할당하면 (또는 적어도 불필요한 클로저를 많이 만들지 않음) 얻을 수 있습니다. 모든 div를 하나의 클래스 mydivs에 넣은 다음 :

$(document).ready(function(){
    $('.mydivs').click(function(){
        // Get the number starting from the ID's 6th character
        // This assumes that the common prefix is "mydiv"
        var i = Number(this.id.slice(5));

        alert('you clicked ' + i);
    });
});

이것은 요소의 ID를 확인하여 번호를 가져 오며 slice문자열 메서드 를 사용 하여 초기 문자를 제거합니다.

참고 : 사용하는 것이 더 나을 수 있습니다.

$('#divcontainer').on('click', '.mydivs', function(){

대신에

$('.mydivs').click(function(){

---

사용 에 대한 것은 당신이처럼 데이터를 전달하기 위해 이벤트 데이터를 사용할 수 있습니다 핸들러 '클릭'첨부합니다 :

for(var i = 0; i < 20; i++) {
  $('#question' + i).on('click', {'idx': i}, function(e) {
    alert('you clicked ' + e.data.idx);
  });
}

//
// let's creat 20 buttons
//

for(var j = 0; j < 20; j++) {
	$('body').append($('<button/>', {type: 'button', id: 'question' + j, text: 'Click Me ' + j}))
}

//
// Passing data to the handler
//
for(var i = 0; i < 20; i++) {
  $('#question' + i).on('click', {'idx': i}, function(e) {
    console.log('you clicked ' + e.data.idx);
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

---

일반적으로 많은 수의 항목에 클릭 핸들을 할당하려는 경우 클릭이 DOM에서 위로 올라올 때 클릭을 해석하는 컨테이너 (상위 div)가 필요합니다.

<div id="bucket">
    <span class="decorator-class" value="3">
    ...
</div>

<script>
   $(document).ready(function(e){
      $("#bucket").live('click', function(){
         if(e.target).is('span'){
            alert("elementid: " + $(e.target).val());
         }
      }
   }
<script>

참고URL : https://stackoverflow.com/questions/4091765/assign-click-handlers-in-for-loop