jqueryのコンテキストメニューのパラメータを持つ関数を呼び出す

Question

jquery-contextmenuのsumbenuから関数を呼び出して、どのオプションがクリックされたかに応じて特定のパラメータを渡しています。

私はそのサブメニューを、3つの名前を含むjsオブジェクトに従って生成しています。私がそれらの1つをクリックすると、その名前でパラメータが呼び出され、それがコンソールに表示されます。

しかし、それは最後の要素だけで関数を呼び出すため、私はその理由を知らない。 「ジョン」または「マット」をクリックすると、「ペターを押した」と表示されます。ただ、この画像のような

：

私は「ペター」をクリックしたことがない場合でも、それだけで「あなたはペターが押された」表示されます。

コード（私はここでフィドルを置くことができるが、私はjqueryのコンテキストメニューのリンクが見つかりませんでした、それが存在する場合は、私にそれを共有している場合、私は喜んでいるよ）：

var obj = {"1":"john","2":"Matt","3":"Petter"}; 

function myFun(name){ 
    console.log("you pressed "+name); 
} 

$(function() { 
$.contextMenu({ 
    selector: '.context-menu-one', 
    autoHide: true, 
    build: function($trigger, e) { 
    var options = { 
     items: {} 
    } 

    options.items["users"] = {name: "users", icon: "fa-circle", items: {}} 

    for(var i in obj){ 
     options.items["users"].items[obj[i]] = {name: obj[i], icon: "fa-user", callback: function(){ 
     myFun(obj[i]); 
     }} 
    } 

    return options; 
    } 
}); 
}); 

のため申し訳ありません

私の悪い英語と感謝。

Answer 1

これはjavascript言語のクロージャによるものです。コールバック内の変数iへの参照は以前と同じようにスコープの外部に格納され呼び出されますが、ループは実行され、グローバルスコープのiは常に最後のインデックスと等しくなります。できるように、これはこれはループ上の閉鎖を維持し、私は現在時itteratedされているインデックスに等しい値を維持関数内で新しいスコープを作成し、この

for(var i in obj){ 
    (function(j) { 
    options.items["users"].items[obj[j]] = {name: obj[j], icon: "fa-user", callback: function(){ 
     myFun(obj[j]); 
     } 
    } 
    })(i); 
} 

のように動作するようにあなたのループを変更する修正するにはメニューが正しく動作するようにします。

Answer 2

for(var i in obj){ 
    options.items["users"].items[obj[i]] = { 
    name: obj[i], 
    icon: "fa-user", 
    callback: function(){ 
     myFun(obj[i]); // here is the problem 
    } 
    } 
} 

問題がI変数は forループのすべてのコールバックで撮影されたJS閉鎖によって引き起こされます。 したがって、iのメニューをクリックしたときにコールバックを実行すると、同じ変数であるため、常に同じになります。 の値がの場合は、ののループが完了したときの値になります。例では「3」です。ここで

あなたは（すぐに呼び出される関数式）生命維持を使用して問題を回避するために行うことができる方法である

for (var i in obj) { 
    (function (i) { 
    // here goes the code in your for loop 
    })(i); 
}