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); 
    } 
}