I have some JQuery that makes an Ajax call and then adds some rows to an existing table.

function LoadDestinationTable() {

            $("#destinationTable tr:gt(0)").html("");

            var primaryKey = $("#SelectPerson").val();

            var postData = { PrimayKey: primaryKey };

            $.ajax({

                type: "POST",

                traditional: true,

                url: "/Admin/GetData",

                data: postData,

                dataType: "json",

                success: function(data) {

                    $.each(data, function() {

                        $("#destinationTable").append(

                        "<tr><td class='noDisplay'>" + this.PrimaryKey +

                        "</td><td>" + this.FullName +

                        "</td><td>" + this.Address +

                        "</td><td>" +

                        "<input id='ButtonDeleteRecord' type='button' value='Delete' /> " +

                        "</td></tr>");

                    });

                },

                error: function(XMLHttpRequest) {

                    alert(XMLHttpRequest.responseText);

                }

            });

            $('#destinationTable tr').click(function() {

                alert('deleted');

            });

        }

The problem is that the only place where the click event fires is on the rows that were added when the page was 1^st rendered – the th, for example.  I looked at this solution but it did not help.  I also tried adding an onclick event handler to the input button’s creation – that also does not fire.

  Does anyone have any ideas?  Thanks in advance.