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

我有几个div

#mydiv1

，

#mydiv2

，

#mydiv3

。。。并希望为其分配单击处理程序：

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

$（文档）.ready（函数（）{
对于（变量i=0；i<20；i++）{
$（“#问题”+i）。单击（函数（）{
警报（“您单击了”+i）；
});
}
});

---

但是当点击

#mydiv3

时，我没有显示

'youclicked 3'

（以及每点击一次），而是看到

'youclicked 20'

。我做错了什么？

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

---

它更短，更容易理解。

为了澄清，i等于20，因为在循环完成之前不会触发单击事件。

通常，如果您希望为大量项目分配单击句柄，您需要一个容器（更高级别的div）来为您解释单击，当单击从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>

...
$（文档）.ready（函数（e）{
$（“#bucket”）.live（'click'，function（）{
如果（例如，目标）.is（'span'））{
警报（“elementid:+$（e.target.val（））；
}
}
}

您可以只分配一次单击处理程序（或者至少不进行许多不必要的闭包）。将所有div放在一个类中

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

$（文档）.ready（函数（）{
对于（变量i=0；i<5；i++）{
变量$li=$（'
'+i+'
'）；
（职能（一）{
$li.单击（函数（）{
警报（“您单击了”+i）；
});
}（i） ）；
$（'ul'）。追加（$li）；
}
});

使用连接“单击”处理程序，您可以使用事件数据来传递数据，如：

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

for（变量i=0；i<20；i++）{
$（“#问题“+i）.在（'click'，{'idx'：i}上，函数（e）{
警报（'您单击'+e.data.idx'）；
});
}

//
//让我们创建20个按钮
//
对于（var j=0；j<20；j++）{
$（'body'）.append（$（''，{type:'button'，id:'question'+j，text:'Click Me'+j}））
}
//
//将数据传递给处理程序
//
对于（变量i=0；i<20；i++）{
$（“#问题“+i）.在（'click'，{'idx'：i}上，函数（e）{
log（'您单击'+e.data.idx'）；
});
}

---

实际上，作为一种解释，应该说明引用“i”的匿名函数仅在循环的上下文中执行，而不是立即运行。这意味着，当onclick事件发生时，“i”实际上处于循环的结束状态。您可以通过将“i”作为局部参数传递来避免这种情况（就像这个回调解决方案一样）。我真的不会调用

callback

“callback”。它不是回调。它是用于创建回调的工厂。答案非常有用。也有这个问题，并且能够修改您的解决方案，以便在每次循环通过时创建绑定单击事件。它将始终为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);
  });
}