динамически создаваемое событие щелчка ссылки срабатывает, но функция удаления не дает желаемого эффекта

Привет, я играю с gridview и функцией автозаполнения jqueryui. Я добавляю строки в gridview динамически после нажатия элемента на возвращаемом элементе автозаполнения, вот код:

$("#<%=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
            });

и вот моя функция удаления:

$('#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");
                    // Do some animation effect

                    tr_id.fadeOut(500, function () {

                        //Remove GridView row

                        tr_id.remove();


                    });
                } else {
                    alert('canceled');
                }
            });

функция удаления работает хорошо, но когда первые строки удаляются, а il добавляет новое, нажимая на возвращаемые данные автозаполнения, функция удаления по-прежнему работает, но фактическое удаление строки не работает

Что я делаю не так?

любое предложение было бы очень полезно

Спасибо