动态创建OnClick处理程序Jquery

Dynamically Created OnClick Handlers Jquery

本文关键字：程序 Jquery 处理 OnClick 创建 动态      更新时间：2023-09-26

我有4个css类，它们以特定的方式命名：test-class-0、test-class-1、test-cclass-2和test-class-3，这样我就可以以编程方式注册自定义点击处理程序。

这是我的尝试：

for(var i = 0; i < 4; i++) {
  $('.test-class-'+i).on('click', function(e){ alert(i); });
}

完整演示：

for (var i = 0; i < 4; i++) {
  $('.test-class-' + i).on('click', function(e) {
    alert(i);
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test-class-0">TEST 1</div>
<div class="test-class-1">TEST 2</div>
<div class="test-class-2">TEST 3</div>
<div class="test-class-3">TEST 4</div>

然而，当事件被注册时，当我希望在处理程序注册时使用i的值时，处理程序将始终使用i的最新值，即4，所以当我分别单击test-class-0、1、2、3时，我会得到alert（0）、alert（1）、alert（2）和alert（3）。

有没有一种方法可以在注册点击处理程序时锁定函数中I的值？

for (var i = 0; i < 4; i++) {
  $('.test-class-' + i).on('click', {
    i: i
  }, function(e) {
    alert(e.data.i);
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test-class-0">TEST 1</div>
<div class="test-class-1">TEST 2</div>
<div class="test-class-2">TEST 3</div>
<div class="test-class-3">TEST 4</div>

或者，您可以只使用一个事件处理程序，并在运行时解析类索引：

$('[class*="test-class-"').on('click', function() {
  var i = $(this).attr("class").replace("test-class-", "");
  alert(i);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test-class-0">TEST 1</div>
<div class="test-class-1">TEST 2</div>
<div class="test-class-2">TEST 3</div>
<div class="test-class-3">TEST 4</div>

使用闭包：

for(var i = 0; i < 4; i++) {
  (function( i ) {
     $('.test-class-'+i).on('click', function(e){ alert(i); });
  })( i )
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test-class-0">TEST 1</div>
<div class="test-class-1">TEST 2</div>
<div class="test-class-2">TEST 3</div>
<div class="test-class-3">TEST 4</div>

您可以尝试使用这个而不是for：

$('*[class*="test-class-"]').each(function(i) {
  $(this).on('click', function() {
    alert(i + 1)
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test-class-0">TEST 1</div>
<div class="test-class-1">TEST 2</div>
<div class="test-class-2">TEST 3</div>
<div class="test-class-3">TEST 4</div>

相关文章：