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 #mydiv3
ich klicke (wie bei jedem anderen Klick), bekomme ich 'you clicked 20'
. Was mache ich falsch?
callback
"Rückruf" nennen. Es ist kein Rückruf. Es ist eine Fabrik zum Erstellen von Rückrufen.Zur Verdeutlichung ist i gleich 20, da das Klickereignis erst nach Beendigung der Schleife ausgelöst wurde.
quelle
$(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); } });
quelle
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); }); }
Code-Snippet anzeigen
// // 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>
quelle
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
slice
Zeichenfolgenmethode entfernt.Hinweis: Es ist möglicherweise besser zu verwenden
$('#divcontainer').on('click', '.mydivs', function(){
anstatt
$('.mydivs').click(function(){
quelle
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>
quelle