Question

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);
}

Answer 1

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:

• .live() – bind event listener to the body element (has disadvantages)
• .delegate() – bind event listener to the (parent)elements you specify (better performance)

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)

http://paulirish.com/2010/on-jquery-live/