how to retain the functionality of the div and buttons inside it after reloading that div

Question

I have a html table which displays the data from database i am reloading the data inside the table every 30 secs from the database but while doing so table gets reloaded with the every new value inserted from the database but it does not retains the functionality of the delete button in that table,whereas before reload it allows me to delete and after reload nothing happens when i click on that button also it does not allow editing of the columns whereas before reload it allows me do that ..what should i do? here is my html table code-

<div id="divGrid">
                             <table class="footable" data-filter="#filter" id="tableresult" >
                               <thead>

                                <th>Client name</th>
                                 <th>Staff name</th>
                                 <th>Matter</th>
                                 <th> Delete</th>
                              </thead>
                             <tr id="<?php echo $id; ?>" class="edit_tr">

<td class="edit_td" >
<span id="client_<?php echo $id; ?>" class="text"><?php echo $clientname; ?></span>
<input type="text" value="<?php echo $clientname; ?>" class="editbox" id="client_input_<?php echo $id; ?>" /&gt;
</td>

<td class="edit_td">
<span id="staff_<?php echo $id; ?>" class="text"><?php echo $staff; ?></span> 
<input type="text" value="<?php echo $staff; ?>" class="editbox" id="staff_input_<?php echo $id; ?>"/>
</td>

<td class="edit_td">
<span id="matter_<?php echo $id; ?>" class="text"><?php echo $matter; ?></span> 
<input type="text" value="<?php echo $matter; ?>" class="editbox" id="matter_input_<?php echo $id; ?>"/>
</td>
<td class="delete_td"><input type="button" id="del" class="btn btn-danger" value="&times;"></input></td>
</tr>
</tbody>

</table>
</div>

and script that i am using for reloading table-

<script>
$(document).ready(function(e) {

    var refresher = setInterval("update_content();",30000); // 30 seconds

});

function update_content(){

  $('#divGrid').load('main.php #divGrid>table');

}
</script>

functionality that delete button performs before reload and should actually retain even after delete is-

$(document).ready(function(){

var ID = 0;
var parent = null;

    $('input[type=button]').click(function(){
         ID = $(this).parent().parent().attr('id');
   parent = $(this).parent().parent();
   $('#modal').dialog('open');


   });
$('#modal').dialog({
    autoOpen: false,
     title: 'Delete Confirm Box',
     width: 400,
      buttons : [
            {
                text: 'OK',
                click: function () {
                    $("#modal").dialog('close');
                     var data = 'id=' + ID;
                      $.ajax(
                {
                    type: "POST",
                    url: "delete.php",
                    data: data,
                    cache: false,
                    success: function()
                    {
                        parent.fadeOut('slow', function(){
                            $(this).remove();
                        });
                    }
                });  


                }
            },
            {
                text: 'Cancel',
                click: function () {
                    $("#modal").dialog('close');
                }
            }
        ]
});



});