DOM元素的onclick（MooTools的可选::）

Question

请看下面的例子：

function async_callback(array1, array2, array3) { 
    // All arrays are equal length 

    for(var i = 0; i < array1.length; i++) { 
    var myElement = new Element('div', { 'id': 'dvMy' + i, 'events': { 'click': function() { SomeFunction(array1[i], array2[i], array3[i] } }}); 
    $(document).appendChild(myElement); 
    } 
} 

现在，当我点击我的元素，我得到了所有三个参数的空值。 我甚至尝试过：myElement.onclick = SomeFunction;//但这不会允许参数 我知道我可以创建一个字符串和使用eval（），并确实工作，但我不喜欢eval（）。

任何想法???

btw：这是一个简单的例子来复制问题，而不是实际的代码。

Answer 1

这是您的处理程序：

function() { SomeFunction(array1[i], array2[i], array3[i] } } 

到时候它的执行，根据条件语句（i < array1.length）和迭代语句（i++），循环将完成，因此i将等于该阵列的length。

解决这个最简单的方法是包装在一个额外的立即执行的功能的处理程序，并通过i给它， - 这将有一个新的闭包保留的i值的效果：

for(var i = 0; i < array1.length; i++) { 
    var myElement = new Element('div', { 'id': 'dvMy' + i, 'events': { 
     'click': (function(i){ 
      return function() { SomeFunction(array1[i], array2[i], array3[i] } }; 
     }(i)) 
    }); 
    $(document).appendChild(myElement); 
} 

Answer 2

这是一个典型的例子：当click处理程序运行时，i被设置为循环中到达的最后一个值，在本例中为array1.length。为了得到你想要的，你需要调用一个函数来创建点击处理程序，并通过它的i值：

function async_callback(array1, array2, array3) { 
    function createClickHandler(n) { 
    return function() { 
     SomeFunction(array1[n], array2[n], array3[n]); 
    }; 
    } 

    // All arrays are equal length 
    for(var i = 0; i < array1.length; i++) { 
    var myElement = new Element('div', { 
     'id': 'dvMy' + i, 
     'events': { 
     'click': createClickHandler(i) 
     } 
    }); 
    $(document).appendChild(myElement); 
    } 
}