使用 jQuery 循环设置事件函数触发器

set event function trigger in looping with jquery

本文关键字：函数 触发器 事件 设置 jQuery 循环 使用      更新时间：2023-09-26

我想问一些关于使用 jquery 设置事件触发器的问题。

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

我有这个代码：

for(i=1;i=<3;i++){
 $('.btnAdd'+i).click(function(){
    alert(i);
 });
}

当我点击 btnadd1 时，代码应该是 alert（1），当我点击 btnadd2 时，代码应该是 alert（2），但问题是当我单击 Btnadd1、btnadd2 或 btnadd3 时，它会提醒"3"

我的假设是该函数覆盖了前一个函数。有人有解决这个问题的方法吗？

这是一个常见的闭包问题。您可以像这样解决它：

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

吉斯菲德尔

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

最好在按钮中使用用户定义的属性，并使用单个类来绑定事件。 请参阅@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/

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

$('.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"] 等等，但我认为这个解决方案更好且可读。

相关文章：