jQuery插件返回"无法读取未定义的属性"

Question

我正在尝试做很多次我做过的事情.我无法弄清楚为什么这不起作用.无论我如何编写jQuery代码,它都不起作用.menuitems[i].action()只是不工作.下面是示例1,其中这个例子,无论点击什么项目,它都会返回最后一项的动作(在这个例子中它是alert('Forward!')).第二个返回undefined属性.完整的错误如下.

我的jQuery插件就是这样调用的(以下示例是同一个调用发生的事情):

$('p').contextMenu([
    {
        name:'Back',
        action:function(){
            alert('Back!');
        },
        icon:'http://cdn.iconfinder.net/data/icons/crystalproject/16x16/actions/agt_back.png'
    },
    {
        name:'Forward',
        action:function(){
            alert('Forward!');
        },
        icon:'http://cdn.iconfinder.net/data/icons/crystalproject/16x16/actions/agt_forward.png'
    }
]);

例1:

for (i in menuitems){
    $('<li/>',{
        'html':'<img src="'+menuitems[i].icon+'">'+menuitems[i].name,
        'class':o.itemClass,
        'click':function(){
            menuitems[i].action();
        }
    }).appendTo('.'+o.listClass);
}

这将返回一个带有Forward的警报!无论点击哪一项,后退或前进.

例2:

var len = menuitems.length;
for (var i = 0; i < len; i++){
    $('<li/>',{
        'html':'<img src="'+menuitems[i].icon+'">'+menuitems[i].name,
        'click':function(){
            menuitems[i].action();
        },
        'class':o.itemClass
    }).appendTo('.'+o.listClass);
}

我明白了:

未捕获的TypeError:无法读取未定义的属性"action"

我试过的其他随机的东西是分离点击并将其重新连接到该appendTo()块之外,更改action()为newtest()确保它与任何内置关键字没有冲突.我也试过做了$('body').append('<li>{blah blah}</li>').find('li').click(function(){/*blah blah*/});但是它仍然返回了同样的东西.我想法了!

Answer 1

问题是"i"递增,所以在执行click事件时,i的值等于len.一种可能的解决方案是在函数内捕获i的值:

var len = menuitems.length;
for (var i = 0; i < len; i++){
    (function(i) {
      $('<li/>',{
          'html':'<img src="'+menuitems[i].icon+'">'+menuitems[i].name,
          'click':function(){
              menuitems[i].action();
          },
          'class':o.itemClass
      }).appendTo('.'+o.listClass);
    })(i);
}

在上面的示例中,匿名函数创建一个新范围,用于捕获i的当前值,以便在触发click事件时使用局部变量而不是for循环中的i.