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 <[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
.
--
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.
