Question

i have a small jquery script that when I click an ajax actionlink in a grid/table(built from a webgrid) it will replace the contents with a spinning wheel. It works the first time only.

$('#thisGrid tr td').click(function () {
    $(this).html('<img  src="@Url.Content("~/Content/ajax-loader.gif")" alt="Loading... Please Wait" style="height: 20px;"/>');
});

I have not found anything that has led me to determine why this is so… Any thoughts on why this might be happening?

Answer 1

Delegate the event

$('#thisGrid').on('click','td' , function () {
    $(this).html('<img  src="@Url.Content("~/Content/ajax-loader.gif")"
                alt="Loading... Please Wait" style="height: 20px;"/>');
});

UPDATE For jQuery 1.6 and below

 $('#thisGrid').delegate('td' , 'click', function () {
        $(this).html('<img  src="@Url.Content("~/Content/ajax-loader.gif")"
                    alt="Loading... Please Wait" style="height: 20px;"/>');
    });