代码之家 › 专栏 › 技术社区 › Theofanis Pantelides

Dom元素onclick(MooTools::可选)

mootools javascript-events dom events javascript

0

Theofanis Pantelides · 技术社区 · 16 年前

考虑以下示例:

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; // but this won't allow arguments

我知道我可以创建一个字符串并使用 eval() 评估()

有什么想法吗?

2 回复 | 直到 6 年前

1

2

James 16 年前

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

当它被执行时,循环将完成并且 i length 根据条件语句( i < array1.length 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);
}

2

1

Tim Down 16 年前

这是一个经典:当 click 处理程序运行, i 设置为它在循环中到达的最后一个值,在本例中为 array1.length 我 :

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