Customise headers webgrid

I want customize headers in a WebGrid. My WebGrid works in Ajax, and on the first load the headers show correctly, with the name of column, textbox and button "go", because this function:

$(document).ready(function () {
    $('th[scope^=col]').append("  <input type='text' style='width:100px;' /> <input type=button value='Go' />");
});

This works correctly.

But if I click a sort or paging link, the customized header in ajaxUpdateCallback: "customizeHeaders()" works before @RenderBody -- I can see it correctly customize one moment before @RenderBody -- but then quickly disappears.

Please help me create a handler or other mechanism to control the end of rendering. Sorry for my bad english.

index.cshtml

@model MVC3.ViewModels.PaginaDeClientesViewModel
<script src="@Url.Content("~/Scripts/Customer/Customerjs.js")" type="text/javascript"></script>

@{
    ViewBag.Title = "Index";

    WebGrid  grid = new  WebGrid(rowsPerPage: Model.ClientesPorPagina , ajaxUpdateContainerId:"contenedor-grid", ajaxUpdateCallback: "customizeHeaders()" );

    grid.Bind(Model.Clientes, autoSortAndPage: false, rowCount: Model.NumeroDeClientes);   
}
$
<h2>Index</h2>
<div class="clickmeChart ButtonLink" >
 show chart
</div>

<div class="clickmeCreate ButtonLink">
    Nuevo Cliente
</div>

<div id="contenedor-grid" class="grid">
@grid.GetHtml( fillEmptyRows: false,

    alternatingRowStyle: "fila-alternativa",
    rowStyle :"fila",
    headerStyle: "encabezado-grid",
    footerStyle: "pie-grid",
    mode: WebGridPagerModes.All,
    firstText:  "<< Primera",    previousText: "< Anterior",    nextText: "Siguiente >",    lastText: "Última >>",
    columns :new[] 
{grid.Column("NOMBRE", canSort:true),
    grid.Column("DIRECCION",canSort:true),
    grid.Column("POBLACION",canSort:true),
    grid.Column("PROVINCIA",canSort:true),
    grid.Column("CODIGOPOSTAL", header:"CP",canSort:true),
    grid.Column("TELEFONO",canSort:true),
    grid.Column("NIF",canSort:true),
    grid.Column(
          "", 
          style:"acciones",
          header: "Acciones",
          format: @<text>
                    <span class="clickmeEdit ButtonLink" customerId="@item.ID">Editar</span>
                    |
                    @Html.ActionLink("Detalles",   "Details",   new { id= item.ID} )
                    |
                    @Html.ActionLink("Eliminar", "Delete", new { id=item.ID} )
                    |
                    @Html.ActionLink("Facturar", "Facturar", new { id=item.ID} )
                    <input type="hidden" id="CurrentPage" name="CurrentPage" value="@Model.CurrentPage" />
                    <input type="hidden" id="CurrentOrder" name="CurrentOrder" value="@Model.CurrentOrder" />
                    <input type="hidden" id="CurrentDir" name="CurrentDir" value="@Model.CurrentDir" />

                  </text>
    )
})


</div>
<div id="user_content" style="width: 600px; height: 400px;display:none"></div>
<div id="user_content_edit" style="width: 600px; height: 400px;display:none"></div>
<div id="chart_content" style="width: 600px; height: 400px;display:none"></div>
<div id="msg"></div>


<script language="javascript" type="text/javascript">

//this work first load
$(document).ready(function () {
    $('th[scope^=col]').append("  <input type='text' style='width:100px;' /> <input type=button value='Go' />");
})

//this works before render body, but doesn't display when the page is complete :(
function customize开发者_如何转开发Headers() 
{
    $(document).ready(function () {
        //$('thead > tr > th :contains(NOMBRE)').append("<input type='text'/>");
        $('th[scope^=col]').append("  <input type='text' style='width:100px;' /> <input type=button value='Go' />");
    })
}
</script>