http://ryanflorence.com/event-delegation-with-mootools-quit-selecting-all-those-elements/
On Jan 31, 2011, at 8:21 AM, Clement Hallet wrote: >> Your "ul" element will receive all the clicks from any element inside it, >> (if the event is not stopped of course) >> the ones that exists, and the ones that may be created later. > > Code updated to see click handling on new elements : > http://jsfiddle.net/QXsMM/9/ > > > Le 31 janv. 2011 à 16:11, Clement Hallet a écrit : > >> As told before, you can use the event delegation : >> >> Your "ul" element will receive all the clicks from any element inside it, >> (if the event is not stopped of course) >> the ones that exists, and the ones that may be created later. >> This is called "bubbling" and there is several article about this. >> >> By using that behavior you can write this code : http://jsfiddle.net/QXsMM/6/ >> >> This is the same mechanism as the one from the jQuery Live plugin. >> >> -- >> Clément >> >> >> Le 31 janv. 2011 à 15:42, roark a écrit : >> >>> Hi Clement, >>> >>> Thanks for the quick response! >>> >>> I have added the code on jsfiddle so it can be viewed here: >>> http://jsfiddle.net/roark/QXsMM/5/ >>> >>> Thanks again for your help >>> >>> On Jan 31, 4:07 pm, Clement Hallet <[email protected]> wrote: >>>> Hi, >>>> >>>> You can use only one listener and deals with event delegation. >>>> Could you please put your code onhttp://jsfiddle.net/and i'll try to help >>>> you. >>>> >>>> -- >>>> Clément >>>> >>>> Le 31 janv. 2011 à 15:00, roark a écrit : >>>> >>>>> Hi Everyone, >>>> >>>>> I think I must be writing bad code here. >>>> >>>>> I will load a page with a few li's with links in them. once loaded, I >>>>> add events to the links >>>>> [code] >>>>> $$('li a').each(function(el){ >>>>> el.addEvent('click',function(e){ >>>>> e.stop(); >>>>> //code to execute >>>>> }); >>>>> }); >>>>> [/code] >>>> >>>>> Then when I create an element dynamically I am writing the same code >>>>> again: >>>>> [code] >>>>> var li = new Element('li').inject($('ul.list')); >>>>> var del = new Element('a', {'class':'delete sprite', >>>>> 'title':'delete'+player.name}).inject(li); >>>>> //code being repeated >>>>> el.addEvent('click',function(e){ >>>>> e.stop(); >>>>> //code to execute >>>>> }); >>>>> [/code] >>>> >>>>> It may not look like much but when I send requests the code gets long >>>>> and it seems I'm duplicating code when I add the 'click' event. >>>> >>>>> This seems like bad code to me, but can't think of a way to write it >>>>> any more efficient >>>>> Any input is greatly appreciated! >> >
