javascript - Created jQuery button not listening to click -

this question has answer here:

• event binding on dynamically created elements? 19 answers

i've got little loop in new buy button created every product in array.

in loop buy button created , should clicked. however, click isn't being registered. button appear in page though.

var list = jquery('<ul/>'); (var in persecondproducts) {     var product = persecondproducts[i];      var listitem = jquery('<li/>');     listitem.html(i + '(' + product['price'] + ')');       var buybutton = jquery('<button />');      buybutton.html('buy');      buybutton.data('price', product['price']);     buybutton.data('scorepersecondupgrade', product['scorepersecondupgrade']);      listitem.append(buybutton);     buybutton.click(function () {         console.log('123123');     });      list.append(listitem); }  $('.productspersecondlist').html(list.html()); 

change:

$('.productspersecondlist').html(list.html()); 

to:

$('prodictspersecondlist').empty().append(list); 

when use .html(), you're not adding <ul> , buttons created. you're adding new html same source code them, i.e. copy of everything. result, don't of event bindings.

you can solve using event delegation, shown in rajaprabhu aravindasamy's answer. binding isn't specific elements, elements match selector. usual, idiomatic way accomplish this.