javascript - jquery not triggered in loop -

i'm building internal javascript app , has function creating editable lists of objects. loops through array of objects, , displays summary each 1 along edit button. displays more buttons @ bottom of list creating new items , going previous screen.

all of buttons work, expect ones created within loop. click event never fires buttons added dom within loop. strange thing if take edit variable , append dom outside of loop click event fire.

var displayarray = function (where, list, summarise, display, newitem, completion, back) {     var listing = $("<div>");     listing.addclass("listing");      (var = 0; < list.length; i++) {         var index = i;         var edit = createbutton("edit", function () {             display(list[index]);         });          var anchor = $("<p>");         anchor.text(summarise(list[index]));         anchor.append(edit); //this create edit button, click event never fired         listing.append(anchor);     }     where.append(listing);      var create = createbutton("new", newitem);      where.empty();     where.append(listing);     where.append(create);     //where.append(edit); // uncomment , create button display last item in list     if (back) { where.append(createbutton("back", back)); }      if (completion) {         completion();     } }  var createbutton = function(name, action){     var button = $("<input>");     button.attr("type", "button");     button.attr("value", name);     button.on("click", action);     return button; } 

the variables being passed function follows:

• where = html element display items
• list = array of objects display
• summarise = function generates summary text object passed displayed object listing
• display = function generates edit screen object
• newitem = function generates new object , displays edit screen it
• completion = function call after screen has been built generate additional ui needed.
• back = function display previous screen

the behaviour consistent across ie9, firefox 20.0.1, , chrome 29.0.1547.66

i know problem here:

try this.

for (var = 0; < list.length; i++) {     var index = i;     var edit = createbutton("edit", (function (item) {         return function () {             display(item);         };     })(list[index]));