0

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?

tereško
  • 58,060
  • 25
  • 98
  • 150
Kixoka
  • 989
  • 4
  • 15
  • 37
  • 1
    Consider that the click handlers may need to be wired up again to any new `#thisGrid tr td` present in the ajax'ed html. Use jQuery `on` to do this. – StuartLC Nov 07 '12 at 16:10
  • I tried using the 'on' method but it throws an error saying it doesnt support the method. – Kixoka Nov 07 '12 at 16:45

2 Answers2

1

Possibly try using a live click function.

$('#thisGrid tr td').live('click', function(){ ...
Andy
  • 84
  • 1
  • 6
0

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;"/>');
    });
Sushanth --
  • 55,259
  • 9
  • 66
  • 105