[JQUERY] 루프에서 지정 클릭 핸들러

루프에서 지정 클릭 핸들러

해결법

1. ---

   1.그것은 자바 스크립트에서 루프에서 클로저를 만들 수있는 일반적인 실수이다. 이 같은 콜백 함수의 일종이 필요합니다 :

   그것은 자바 스크립트에서 루프에서 클로저를 만들 수있는 일반적인 실수이다. 이 같은 콜백 함수의 일종이 필요합니다 :

   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을 작성하는 경우, 당신은 글로벌 대신 루프 지역의 I 변수를 만드는하자 키워드를 사용할 수 있습니다 :

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

   그것은 짧고 이해하기 쉽다.

2. ---

   2.클릭 이벤트가 루프가 완료 될 때까지 해고되지 않기 때문에 명확히하기 위해, 나는 20과 같다.

   클릭 이벤트가 루프가 완료 될 때까지 해고되지 않기 때문에 명확히하기 위해, 나는 20과 같다.

3. ---

   3.

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

4. ---

   4.에 사용하면에서처럼 데이터를 전달하기 위해 이벤트 데이터를 사용할 수 있습니다 핸들러 '클릭'첨부합니다 :

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

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

   // //하자를 creat (20) 버튼 // 대 (VAR의 J = 0; J <20; J ++) { . $ ( '몸') APPEND ($ ( '<버튼 />'{유형 : '버튼'ID : '질문'+ J, 텍스트 : '나를 클릭'+ J})) } // // 핸들러에 데이터를 전달 // 위한 VAR (I = 0; I <20; I ++) { $ ( '# 질문'+ I) CSTE 연구진 ({ 'IDX'내가} '클릭'{), 기능 (예를 CONSOLE.LOG는 (+ e.data.idx '당신은 클릭'); }); } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

5. ---

   5.당신은 (또는 적어도 많은 불필요한 폐쇄을하지)를 한 번 클릭 처리기를 할당에 의해 얻을 수 있습니다. 다음, 하나의 클래스 mydivs의 모든 div를 넣어 :

   당신은 (또는 적어도 많은 불필요한 폐쇄을하지)를 한 번 클릭 처리기를 할당에 의해 얻을 수 있습니다. 다음, 하나의 클래스 mydivs의 모든 div를 넣어 :

   $(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(){
   

6. ---

   6.당신은 많은 수의 항목을 클릭 핸들을 지정하고자하는 경우 일반적으로, 당신은 당신을 위해 해석 클릭은 클릭이 DOM에서 최대 거품으로하는 용기 (높은 수준의 사업부를) 갖고 싶어.

   당신은 많은 수의 항목을 클릭 핸들을 지정하고자하는 경우 일반적으로, 당신은 당신을 위해 해석 클릭은 클릭이 DOM에서 최대 거품으로하는 용기 (높은 수준의 사업부를) 갖고 싶어.

   <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>
   

from https://stackoverflow.com/questions/4091765/assign-click-handlers-in-for-loop by cc-by-sa and MIT license