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 <[email protected]> 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 [email protected]
.
To unsubscribe from this group, send email to [email protected]
.
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 [email protected]
.
To unsubscribe from this group, send email to [email protected]
.
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 [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
