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(); }); }
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
Post a Comment