Weisen Sie Click-Handler in der for-Schleife zu

Ich habe mehrere divs #mydiv1, #mydiv2, #mydiv3, ... und wollen assign Klick - Handler zu ihnen:

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

Aber anstatt zu zeigen, 'you clicked 3'wann #mydiv3ich klicke (wie bei jedem anderen Klick), bekomme ich 'you clicked 20'. Was mache ich falsch?

Es ist ein häufiger Fehler, in Javascript Verschlüsse in Schleifen zu erstellen . Sie benötigen eine Rückruffunktion wie diese:

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

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

Update 3. Juni 2016: Da diese Frage immer noch an Bedeutung gewinnt und auch ES6 immer beliebter wird, würde ich eine moderne Lösung vorschlagen. Wenn Sie ES6 schreiben, können Sie das letSchlüsselwort verwenden, mit dem die iVariable lokal in der Schleife anstatt global ist:

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

Es ist kürzer und leichter zu verstehen.

Zur Verdeutlichung ist i gleich 20, da das Klickereignis erst nach Beendigung der Schleife ausgelöst wurde.

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

Mit on zum Anhängen des Klick-Handlers können Sie die Ereignisdaten verwenden, um Ihre Daten wie folgt zu übergeben:

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>

Sie können damit auskommen, den Klick-Handler einmal zuzuweisen (oder zumindest nicht viele unnötige Schließungen vorzunehmen). Setzen Sie alle Divs in eine Klasse mydivs, dann:

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

Dabei wird die ID des Elements überprüft, um seine Nummer zu erhalten. Dabei werden die Anfangsbuchstaben mithilfe der sliceZeichenfolgenmethode entfernt.

Hinweis: Es ist möglicherweise besser zu verwenden

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

anstatt

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

Wenn Sie einer großen Anzahl von Elementen Klick-Handles zuweisen möchten, benötigen Sie im Allgemeinen einen Container (Div auf höherer Ebene), der die Klicks für Sie interpretiert, da der Klick aus dem Dom sprudelt.

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