jQuery插件返回“无法读取未定义的属性”答案

【问题标题】：jQuery plugin returning "Cannot read property of undefined"jQuery插件返回“无法读取未定义的属性”
【发布时间】：2010-11-12 05:13:05
【问题描述】：

我正在尝试做一些我做过很多次的事情。我不知道为什么这不起作用。无论我如何编写 jQuery 代码，它都不起作用。 menuitems[i].action() 只是不起作用。下面是示例 1，在该示例中，无论单击哪个项目，它都会返回最后一个项目的操作（在此示例中为 alert('Forward!')）。第二个返回未定义的属性。下面是完整的错误。

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

我明白了：

未捕获的类型错误：无法读取未定义的属性“动作”

我尝试的其他随机操作是分离点击并将其重新附加到 appendTo() 块之外，将 action() 更改为 newtest() 以确保它不会与任何内置关键字冲突。我也试过做一个$('body').append('<li>{blah blah}</li>').find('li').click(function(){/*blah blah*/});，但它仍然返回同样的东西。我没有想法！

【问题讨论】：

您是否尝试过使用调试器单步执行此操作？
对调试器有什么建议吗？我只是在使用 Chrome 的检查器
Firebug 中的同样错误...
Firebug 中的确切一个是： menuitems[i] is undefined file:///C:/Users/oscargodson/Documents/jquery_apps/contextmenu.html Line 65
啊...要注意的一件事，伙计们，如果我像var test = menuitems[i] 这样添加，它不再是undefined，但它只会在每个操作上调用最后一个 action()项目（就像我上面说的，它会是警报（'Forward！'）

标签： javascript jquery plugins undefined

【解决方案1】：

问题是“i”是递增的，所以当点击事件执行时，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 的当前值，因此当点击事件被触发时，将使用局部变量而不是 for 循环中的 i。

【讨论】：

天才！呃，我不敢相信我没有想到这个......谢谢，这会奏效。非常感谢

【解决方案2】：

通常这个问题是在最后一次迭代中你有一个空对象或未定义对象。在你的 cicle 中使用 console.log() 来检查这是否发生了。

有时某个地方的原型会添加一个额外的元素。

【讨论】：

【解决方案3】：

我对“视差”插件有同样的问题。我将 jQuery 库版本从 *jquery-1.10.2*. 更改为 *jquery-1.6.4* 并清除错误。

【讨论】：