使用jquery在循环中设置事件函数触发器

Question

我想问一下jquery的set event trigger。

首先，我有一个带有许多按钮的表单（btnadd1，btnadd2，btnadd3，...）

我有这段代码：

for(i=1;i=<3;i++){

 $('.btnAdd'+i).click(function(){
    alert(i);
 });
}

当我点击btnadd1时代码应该是警报（1），当我点击btnadd2时警告（2）， 但问题是当我点击btnadd1，btnadd2或btnadd3时它会提示“3”

我的假设是该函数会覆盖以前的函数。有没有人有这个问题的解决方案？

Answer 1

这是一个常见的closure问题。你可以像这样解决它：

$('.btnAdd'+i).click(function(idx){
   return function(){alert(idx);};
 }(i));

JSFIDDLE

Answer 2

避免在循环中使用闭包...更好的是为所有按钮分配单个类并为此注册单个事件...使用数据属性。

$('.someclass').click(function() {
  alert($(this).data('value')); //using jquery's data function
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="someclass" data-value="1">
  button1
</button>
<button class="someclass" data-value="2">
  button2
</button>

还有其他解决方案可以实现你想要的，使用属性选择器[class^="btnadd"]等等，但我认为这个解决方案更好，更易读。

Answer 3

该问题涉及内部循环闭包。

最好能够在按钮中使用用户定义的属性，并使用单个类来绑定事件。见@ bipen的答案。

<button class= "someclass" data-value="1"> click</button>
<button class= "someclass" data-value="2">click </button>



 $('.someclass').click(function(){
     alert($(this).attr('data-value'));
  });

检查小提琴

http://jsfiddle.net/hoja/3jt5furd/5/