在for循环中分配点击处理程序

Question

我有几个div的#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'.我究竟做错了什么？

Answer 1

在Javascript 中用循环创建闭包是一个常见的错误.你需要有这样的回调函数:

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

它更短更容易理解.

Answer 2

为了澄清,我等于20,因为在循环结束之前,click事件才会被触发.

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

Answer 4

使用on附加“点击”处理程序，您可以使用事件数据来传递您的数据，例如：

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

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