Currently I have a function which loops to create multiple HTML objects. Each time an object is created, I want to add an onClick function listener to that object so that I can trigger a function when each one is clicked.
What's the best way to do this?
Here's the code which creates my objects:
RenderMultipleChoice:function()
{
this.c = paper.rect(this.x, this.y, this.shapeWidth, this.shapeHeight);
}
You might consider to use event delegation instead of adding a click listener to each created element. Then you only have one event listener on a parent, and see what element the event bubbled from. It will also magically work for elements created in the future.
jQuery has two methods to handle this for you:
Example:
$("#parent").delegate(".child", "click", RenderMultipleChoice);
live is an awesome function, but you should be aware of it's disadvantages:
Performance difference between jQuery's .live('click', fn) and .click(fn)
You can use addEventListener or attachEvent. Assuming paper.rect returns a DOM element:
if(this.c.addEventListener)
{
this.c.addEventListener("click", listenerFunction, false);
}
else
{
this.c.attachEvent("onclick", listenerFunction);
}
There are libraries to abstract this away.
