Need Help - styling of AJAX created table not persisting

Need Help - styling of AJAX created table not persisting

Hi guys, I'm new to JQuery and am having trouble with some css styling that I have applied to a table created via an AJAX request.  I have a div off screen which scrolls into view when the appropriate link is selected.  This div contains a table which is populated via an AJAX request to the database.

The success function of the AJAX request contains some styling which is applied when the call is made. The table is simply a list of football teams.  Once the list is in view you can select one of the teams and further ajax requests are made to load data into the page.  All fine up to this point.

However, once I've selected a team (and the div scrolls back off the screen) or if I undertake any other action on the page, then if I select the list again all the teams are still there but I've now lost the styling.

The only way I can get the styling back is to call the whole AJAX post again which just adds delay to the web page.  My question is why does the styling from the inital load not persist?

The main AJAX call is as follows:
  1.  $(function getTeams() {
  2.         var sproc = "getTeamList";
  3.         var competition = null;
  4.         var params = new Object();
  5.         params.sproc = sproc;
  6.         params.competition = competition;
  7.         $.ajax({
  8.             type: "POST",
  9.             url: "btsmethods.aspx/GetTeams",
  10.             data: JSON.stringify(params),
  11.             contentType: "application/json; charset=utf-8",
  12.             dataType: "json",
  13.             success: teamlistSuccess,
  14.             failure: function (response) { alert(response.d); },
  15.             error: function (response) { alert(response.d); }
  16.         });
  17.     });
  18.     function teamlistSuccess(response) {
  19.         var xmlDoc = $.parseXML(response.d);
  20.         var cstype = "";
  21.         var xml = $(xmlDoc);
  22.         var customers = xml.find("Table");
  23.         var row = $("[id*=teams] tr:last-child").clone(true);
  24.         $("[id*=teams] tr").not($("[id*=teams] tr:first-child")).remove();
  25.         $.each(customers, function () {
  26.             var customer = $(this);
  27.             var image_src = $(this).find("Badge").text();
  28.             var cstype;
  29.             var sb = "images/mobile/"
  30.             sb += image_src;
  31.             sb += "mob.jpg";
  32.             var bstr = $(this).find("Badge").text().substring(0, 2);
  33.             $("td", row).eq(0).html('<img src="' + sb + '">');
  34.             $("td", row).eq(1).html($(this).find("TeamID").text())
  35.             $("td", row).eq(1).hide();
  36.             $("td", row).eq(3).html($(this).find("Competition").text())
  37.             $("td", row).eq(3).hide();
  38.             $("td", row).eq(4).html($(this).find("CompetitionName").text())
  39.             $("td", row).eq(4).hide();
  40.             if (bstr == "sh") {
  41.                 $("td", row).eq(2).html($(this).find("TeamName").text());
  42.                 $(row).css("background-color", "#ffffff");
  43.             }
  44.             else {
  45.                 $("td", row).eq(2).html($(this).find("TeamName").text().substring(3, ($(this).find("TeamName").text().length)));
  46.                 $(row).css("background-color", "#96d986");
  47.             }
  48.             $("[id*=teams]").append(row);
  49.             row = $("[id*=teams] tr:last-child").clone(true);
  50.         });
  51.     }
I then have code to add a click event to this as follows:

  1.  $("[id*=teams]").on('click', 'tr', function () {
  2.        
  3.         var bsrc;
  4.         var strb;
  5.       
  6.         document.getElementById("hdteamid").value = $(this).find('td:eq(1)').text();     
  7.         document.getElementById("hdteam1name").value = $(this).find('td:eq(2)').text();
  8.         document.getElementById("hdleagueid").value = $(this).find('td:eq(3)').text();
  9.         document.getElementById("hdleaguename").value = $(this).find('td:eq(4)').text();
  10.         document.getElementById("t1").innerHTML = document.getElementById("hdteam1name").value;
  11.         getteambadge();
  12.       
  13.       
  14.         $("#hdteamid").trigger("change");
  15.     });
The HTML for the table is as follows:

  1.  <asp:Table ID="teams" Width="100%" CellPadding="0" CellSpacing="0" BorderStyle="None" CssClass="testtable" runat="server">
  2.             <asp:TableRow CssClass="mobrow">
  3.                 <asp:TableCell ID="teambadge" Width="85px"></asp:TableCell>
  4.                  <asp:TableCell ID="TeamID" ></asp:TableCell>
  5.                  <asp:TableCell ID="TeamN"></asp:TableCell>
  6.                 <asp:TableCell ID="compid"></asp:TableCell>
  7.                 <asp:TableCell ID="compname"></asp:TableCell>
  8.             </asp:TableRow>
  9. </asp:Table>
I am using a Master Page if this makes any difference.

Can anyone tell me why this behaviour is happening and how I might correct it?

Regards

Steven