루프에 대한 클릭 핸들러 할당

루프에 대한 클릭 핸들러 할당

나는 디브를 몇번 하고 있습니다.#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글로벌 대신 루프에 local인 변수:

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);
  }
});

를 사용하여 '클릭' 핸들러를 부착하면 에 있는 것처럼 이벤트 데이터를 전달할 수 있습니다.

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>

클릭 핸들러를 한 번(또는 최소한 불필요한 폐쇄는 많이 하지 않음) 할당하면 해결할 수 있습니다.모든 디브를 한 클래스에 배치합니다.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를 검색하여 원소의 번호를 가져옵니다.

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

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

대신에

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

일반적으로 클릭 핸들을 많은 수의 항목에 할당하려는 경우 클릭이 돔에서 위로 거품이 일 때처럼 클릭을 해석하는 컨테이너(상위 수준의 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