如何使用jQuery将变量参数传递给匿名函数？

Question

有人能告诉我我在这里做错了什么吗？我将其简化如下，但基本上我正在尝试创建一个列表，并具有引用仅在循环中可用的变量的单击事件。

for (var i = 0; i < data.length; i++) {                                                                           
  $newRow = $(rowFormat);                    
  $('a:first', $newRow).click(function(i){
    return function() { alert(i); } 
  });
  $list.append($newRow);      
}

- Mike

---

你做的“不对”的事情被称为闭包。你给每个点击函数都提供了对同一变量i的引用。 - ITroubs

@ITroubs：他显然知道这个问题并试图解决它（事实上，他没有给循环中使用的“i”提供任何引用；他在[外部]匿名函数的参数列表中隐藏了它）。他只是忘记了一些括号--请参见David的答案。 :-) - T.J. Crowder

是的，你说得对。我没有正确地阅读代码；-) - ITroubs

是的，变量命名有点不好。 - Mike

Answer 1

你没有调用外部函数。

$('a:first', $newRow).click(function(j){
  return function() { alert(j); } 
}(i)); /* Pay special attention to this line, it is where the major change is */

正如 T.J. Crowder 提到的，您可以将工厂移出循环。

function my_factory(j) {
    return function() { 
        alert(j); 
    }; 
}

$('a:first', $newRow).click(my_factory(i));

- Quentin

---

通过在单击事件中调用自己的参数，您会失去传递进来的事件参数。 - Eli

@Mike: 建议你将工厂函数移出循环，这样就不会不必要地创建一堆额外的工厂函数了，你只需要一个（用于创建各种“click”函数）。另外，建议使用事件委托而不是为每一行创建单独的事件处理程序。 - T.J. Crowder

@Eli：这不是代码正在做的事情。接受j的函数不是click处理程序，它构建并返回点击处理程序。click处理程序是调用alert的函数。 - T.J. Crowder

它可以被修改为return function(e) { alert(j); }，但由于一开始事件对象并没有被使用... - Quentin

啊，你说得对，我没有完全注意到自执行。 - Eli

正是我所需要的。如果其他人也遇到了这个问题，我使用了这个网站来更好地理解闭包和函数工厂：https://developer.mozilla.org/en/JavaScript/Guide/Closures - Mike

Answer 2

你已经接近成功了，只需要做一个小修改。这实际上是我在JavaScript中使用闭包的最喜欢的实用例子之一。

基本上，你需要创建一个接受一个值并返回使用该值的函数。请参见下面的注释行，了解你的示例缺少什么。你的代码创建了匿名函数，但没有调用它。

for (var i = 0; i < data.length; i++) {                                                                           
  $newRow = $(rowFormat);
  var fn = (function (value) {
    return function() {
      alert(value);
    };
  }) (i); //this is what you were missing, you need to invoke the anonymous function
  $('a:first', $newRow).click(fn);
  $list.append($newRow);      
}

- wsanville

Answer 3

使用'bind'来附加'click'事件并传递参数。使用'event.data'，您将能够获取正确的参数值：

示例1：

 $(document).ready(function()
 {
    for (var i = 0; i < data.length; i++) 
    {                                                                           
        $newRow = $(rowFormat);                    
        $('a:first', $newRow).bind('click', {i: i},
            function (event)
            {
                alert(event.data.i);
            }
        );
        $list.append($newRow);      
    }
});

例子2：

$(document).ready(function()
{
    $(".selectorA").each(function()
    {
        var elementId = $(this).attr("id");

        for(var i = 0; i < 20; i++) 
        {
            $('#question' + i).bind('click', {currentIndex: i, elementId: elementId}, 
                function (event)
                {
                   alert(event.data.currentIndex + " | " + event.data.elementId);
                }
            );
        }
    }
});

- Ricardo de Assuncao Goncalves