javascript - 为通用事件处理程序提供参数

Question

我正在创建一堆带有通用 onclick 事件的元素，例如

function foo( i , j ) {
   alert("foo");
   //dostuff 
};

for (i = 1; i < 8; i++){
  var clas = get_class_for_index( i );
  for ( j = 0; j < 96; j++){

     // tbody > #(i) is a <tr>
     $("#table > tbody > #" + i ).append( function(){
         // I want to give ( i , j ) to foo
         return $("<td id='" + j + "' class='" + clas + "'></td>").on("click", foo );
     });

  };
};

那么，我怎样才能将这些参数传递给 foo 呢？我还可以使用 的 ID，因为它们是 (i,j)，但是如何从 foo 内部获取它们？

Answer 1

您需要在此处使用 IIFE 闭包，否则由于作用域的原因，您最终会将 i 或 j 的最后一个迭代值传递给事件处理程序。

类似这样的:

var $anchors = $("a");

function foo(idx) {
   alert("foo " + idx);
};

for(var i = 0; i < $anchors.length; i++) {
    $anchors.eq(i).on("click", (function(i) {
        return function(e) {
            foo(i);
        }
    }(i)));    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">Link</a> | <a href="#">Link</a> | <a href="#">Link</a> | <a href="#">Link</a>

在上面的示例中，我们使用了一个立即执行的函数(以 i 作为参数)并返回一个函数，该函数随后将被绑定(bind)为点击处理程序并传递正确的 i 到您的 foo。这称为 IIFE(立即调用函数表达式)。