Problem with dynamically generated JavaScript click events

Question

I am trying to generate several divs which each should have a separate onclick handler. However, when I create multiple items in my application, all of the previous items have the same onclick event as the first one. Below is the code that generates the html based on an array or "Project" objects. How can I change this code to retain all individual click events?

var t1 = new Tracker(function(projects) {
        var tempElem;

        projectList.innerHTML = "";
        for(i in projects) {
            tempElem = document.createElement("div");
            tempElem.setAttribute("id", projects[i].id);
            tempElem.setAttribute("class", "project");
            tempElem.innerHTML = projects[i].name;
            projectList.appendChild(tempElem);
            document.getElementById(projects[i].id).onclick = function() {
                t1.setActiveProject(t1.getProjectById(projects[i].id)); };
        }
    }, setActiveProject);

Answer 1

Using jQuery will save you lots of time and headaches. I would recommend using it for what you are trying to accomplish.

http://docs.jquery.com/Main_Page

Answer 2

I need to accomplish this task without the use of frameworks. It is for a class that I am taking.