Question

In the following code I’m rendering a list of projects, each item of which will perform an action relevant to its associated project object when clicked. However, when I run the code, the alerts all show up at once on page load, and then don’t show up when the list item is clicked. What am I doing wrong?

var projects = (an array of project objects)

jQuery.each(projects, function(index, project) {
    jQuery("#project-list").append("<li "+classString+"><a>"+project.title+"</a></li>");
    jQuery("#project-list").find("li:last").click( function() {
                        alert(project.title);
                    });
    }); 

Answer 1

I was able to whip up the following which does, to my knowledge, what you’re attempting:

var projects = [{title:'Project 1'},{title:'Project 2'}];

$.each(projects, function(i){
  $("<a/>", { href:'#', text:projects[i].title })
    .click(function(e){alert( projects[i].title );})
    .wrap("<li></li>")
    .parent()
    .appendTo("#project-list");
});

I was merely guessing on the object structure for your projects, but you could modify this. I’m not sure why your clicks would have been happening automatically; mine work fine in the above code sample. Perhaps there’s something else invoking them that isn’t present in the code you posted here.

Online Demo: http://jsbin.com/uhixac/edit