javascript - Action on jQuery Plugin Is Always Last Option? -


my plugin i'm writing right click context menu internal app, , can't figure out why happening.

here testing code:

$('.item').rightclickmenu([ {   icon:'http://cdn1.iconfinder.com/data/icons/silk2/exclamation.png',   title:'alert',   action:function(){     alert('here example alert!');   } }, {   icon:'http://cdn1.iconfinder.com/data/icons/silk2/error.png',   title:'console.log',   action:function(){     console.log('here example console.log()!');   } } ]); 

the relevant jquery plugin code is:

for(x in items){           $list.append('<li class="rightclickmenuoption'+x+'"><img src="'+items[x].icon+'">'+items[x].title+'</li>')             .find('.rightclickmenuoption'+x)               .bind('click',function(){                 items[x].action();               });         } 

demo: http://jsbin.com/uxali4/3/

this fix it: http://jsbin.com/uxali4/4/edit

you're creating closure. of invoked methods in for..in loop copy same parent context internal [[scope]] property activation object. hence, methods access same variable x. need invoke function fix this.

for(x in items){       (function(index) {         $list.append('<li class="rightclickmenuoption'+index+'"><img src="'+items[index].icon+'">'+items[index].title+'</li>')           .find('.rightclickmenuoption'+index)             .bind('click',function(){               items[index].action();             });       }(x)); } 

update

have @ http://jsperf.com/for-in-vs-for

that should demonstrate pretty impressivly speed difference between for , for..in


Comments

Popular posts from this blog

javascript - Enclosure Memory Copies -

php - Replacing tags in braces, even nested tags, with regex -