jquery - dynamically created link click event firing but the delete function is not doing the desired effect -

hi playing gridview , autocomplete function of jqueryui adding rows gridview dynamically after clicking item on autocomplete returned items here code:

$("#<%=txtsearch.clientid %>").autocomplete({                 source: function (request, response) {                     $.ajax({                         url: '<%=resolveurl("~/web.asmx/hello")%>',                         data: "{ 'prefix': '" + request.term + "'}",                         datatype: "json",                         type: "post",                         contenttype: "application/json; charset=utf-8",                         success: function (data) {                             response($.map(data.d, function (item) {                                 return {                                     label: item.split('-')[0],                                     val: item.split('-')[1]                                 }                             }))                         },                         error: function (response) {                             alert(response.responsetext);                         },                         failure: function (response) {                             alert(response.responsetext);                         }                     });                 },                   select: function (e, i) {                     //$("#<%=hfcustomerid.clientid %>").val(i.item.val);                      var row;                          var totalrows = $("#<%=gridview1.clientid()%> tr").length;                          if (totalrows <= 1) {                             $('#gridview1 tbody tr:first').after('<tr><td></td><td></td><td></td></tr>');                         }                          if (row == null) {                             row = $("[id*=gridview1] tr:last-child").clone(true);                         }                          $("[id*=gridview1] tr").not($("[id*=gridview1] tr:first-child")).remove();                         $("td", row).eq(0).html(i.item.val);                         $("td", row).eq(1).html(i.item.label);                         $("td", row).eq(2).html('<a href=# class=delbutton id=' + i.item.val + '>' + 'delete' + '</a>');                         $("[id*=gridview1]").append(row);                       }                  },                 minlength: 1             }); 

and here delete function:

$('#gridview1').on('click' , '.delbutton' , function (){                 var record_id = $(this).attr("id");                 var tr_id = $(this).parents(".record");                  if (confirm('remove?')) {                     tr_id.css("background-color", "lightgreen");                     // animation effect                      tr_id.fadeout(500, function () {                          //remove gridview row                          tr_id.remove();                       });                 } else {                     alert('canceled');                 }             }); 

the delete function working when first rows deleted , il add new through clicking on autocomplete returned data delete function still works actual deletion of row not working

what doing wrong?

any suggestion helpful

thank you

my guess because first row has "record" class added, when add rows dynamically leave out "record" class.

the new rows fail deleted because you're selecting row delete $(".record").

you need fix selector invoked capture tr_id variable.