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 at http://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 at http://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.

Reply via email to