web-dev-qa-db-ja.com

「未定義のプロパティを読み取れません」を返すjQueryプラグイン

私は何回もやったことをしようとしています。なぜこれが機能しないのかわかりません。 jQueryコードをどのように記述しても、機能しません。 menuitems[i].action()は機能しません。以下は例1です。この例では、どの項目をクリックしても、最後の項目のアクションを返します（この例ではalert('Forward!')です）。 2番目は未定義のプロパティを返します。以下の完全なエラー。

私の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);
}
_

私は得る：

Uncaught TypeError：未定義のプロパティ「アクション」を読み取ることができません

私が試した他のランダムなことは、クリックをデタッチし、appendTo()ブロックの外側に再アタッチし、action()をnewtest()に変更して、競合しないことを確認することでした組み込みキーワード。 $('body').append('<li>{blah blah}</li>').find('li').click(function(){/*blah blah*/});も試してみましたが、それでも同じ結果が返されました。私はアイデアから外れています！

javascriptjquerypluginsundefined
11
Oscar Godson

問題は、「i」が増分されるため、クリックイベントが実行されるまでに、iの値がlenに等しいことです。可能な解決策の1つは、関数内で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の代わりにローカル変数が使用されます。

16
nxt

通常、その問題は、最後の反復で空のオブジェクトがあるか、オブジェクトを未定義にしていることです。 cicle内でconsole.log（）を使用して、このイベントが発生したことを確認します。

ある場所のプロトタイプが余分な要素を追加する場合があります。

0
Siedrix

「parallax」プラグインでも同じ問題が発生しました。 jQueryライブラリのバージョンを*jquery-1.6.4*から*jquery-1.10.2*.に変更し、エラーをクリアしました。

0
byJeevan