Walter, that's really really helpful - thanks! I'm going to have a
look at it some more, play with it and see what I can come up with.
You may have even helped with other issues I've been having with a
similar piece of code in the same app but I'll let you know on that
one ;)
On Apr 28, 4:21 pm, Walter Lee Davis <wa...@wdstudio.com> wrote:
> Forgot to add -- this means that you could have one or twenty-one
> items inside of #foo, add some more, delete some, it doesn't matter.
> One handler will manage all of them, and in my example, bar == trigger
> n, no matter which trigger you clicked on, as long as you provide a
> little bit of sugar so that the function can find it for certain.
> Otherwise, my initial example would also return a reference to #foo
> itself, if you missed the trigger entirely.
>
> div#foo
> div.box
> span.trigger
> div.box
> span.trigger
> div.box
> span.trigger
>
> $('foo').observe('click',function(evt){
> bar = evt.findElement('span.trigger');
> if(bar){
> //do your thing
> }else{
> //ignore, or whatever
> }
>
> });
>
> Walter
>
> On Apr 28, 2010, at 11:11 AM, Walter Lee Davis wrote:
>
>
>
> > Whenever adding an event listener to an object you are adding to the
> > page after load, consider using the event delegation pattern.
> > Observe the container into which you are adding this new object
> > rather than the object itself, and then use Event.element() to get a
> > handle to the actual creator of the event.
>
> > div#foo
> > trigger 1
> > trigger 2
> > trigger dynamically added
>
> > $('foo').observe('click',function(evt){
> > var bar = evt.element();
> > //...
> > //do what you want with bar, it's the actual thing that you clicked
> > });
>
> > Walter
>
> > On Apr 28, 2010, at 9:59 AM, Jangla wrote:
>
> >> Actually, to better pose my question, how can I create an object that
> >> contains an HTML element with an event listener that adds a new
> >> instance of the same object to the page (and with an incremented id)?
>
> >> Should I be adding the event listener from outside the object
> >> entirely? Or am I close but not quite right with my first efforts?
>
> >> On Apr 28, 12:53 pm, Jangla <jangla.m...@gmail.com> wrote:
> >>> Here's some castly cimplified code of what I'm trying to do:
>
> >>> var myClass = Class.create({
> >>> initialize : function() {
> >>> this.id = 0;
> >>> this.type = 'Undefined';
> >>> this.assignedAudienceTypes = [];
> >>> this.title = 'Untitled';
> >>> this.add();
> >>> return this;
> >>> },
> >>> add : function(renderTo) {
> >>> this.setId();
> >>> var containerDiv = document.createElement('div');
> >>> containerDiv.writeAttribute('class', 'element-container');
> >>> renderTo.appendChild(containerDiv);
> >>> containerDiv.writeAttribute('id', 'element-container-' +
> >>> this.id);
>
> >>> var buttonDiv = document.createElement('div');
> >>> buttonDiv.writeAttribute('class', 'button-container');
> >>> renderTo.appendChild(buttonDiv);
> >>> buttonDiv.writeAttribute('id', 'button-' + this.id);
>
> >>> Event.observe('button-' + this.id, 'click', this.add);
> >>> },
> >>> setId : function(){
> >>> if ( $$('.element-container').length ) {
> >>> this.id = $$('.element-container').length - 1;
> >>> }
> >>> }
>
> >>> });
>
> >>> The basic idea is that I'm creating some html elements on the page
> >>> which contain a button which will add another new one to the page.
>
> >>> My code above is clearly wrong (I'm just setting out with full on
> >>> prototype coding) but I'm struggling to understand how to correct
> >>> it.
> >>> For a start, while the setId function works first time round, second
> >>> time around "this" doesn't refer to the object but to the button
> >>> element that was clicked.
>
> >>> Any pointers greatly appreciated :)
>
> >>> --
> >>> You received this message because you are subscribed to the Google
> >>> Groups "Prototype & script.aculo.us" group.
> >>> To post to this group, send email to
> >>> prototype-scriptaculous@googlegroups.com
> >>> .
> >>> To unsubscribe from this group, send email to
> >>> prototype-scriptaculous+unsubscr...@googlegroups.com
> >>> .
> >>> For more options, visit this group
> >>> athttp://groups.google.com/group/prototype-scriptaculous?hl=en
> >>> .
>
> >> --
> >> You received this message because you are subscribed to the Google
> >> Groups "Prototype & script.aculo.us" group.
> >> To post to this group, send email to
> >> prototype-scriptaculous@googlegroups.com
> >> .
> >> To unsubscribe from this group, send email to
> >> prototype-scriptaculous+unsubscr...@googlegroups.com
> >> .
> >> For more options, visit this group
> >> athttp://groups.google.com/group/prototype-scriptaculous?hl=en
> >> .
>
> > --
> > You received this message because you are subscribed to the Google
> > Groups "Prototype & script.aculo.us" group.
> > To post to this group, send email to
> > prototype-scriptaculous@googlegroups.com
> > .
> > To unsubscribe from this group, send email to
> > prototype-scriptaculous+unsubscr...@googlegroups.com
> > .
> > For more options, visit this group
> > athttp://groups.google.com/group/prototype-scriptaculous?hl=en
> > .
>
> --
> You received this message because you are subscribed to the Google Groups
> "Prototype & script.aculo.us" group.
> To post to this group, send email to prototype-scriptacul...@googlegroups.com.
> To unsubscribe from this group, send email to
> prototype-scriptaculous+unsubscr...@googlegroups.com.
> For more options, visit this group
> athttp://groups.google.com/group/prototype-scriptaculous?hl=en.
--
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
