title: MVC JQuery - lose styling after an asynchronous load
body: <p>I have a grid on my form which is colour banded with the following jquery;</p>
  
  <pre><code>$("#tblePagedList tr:even").addClass("row1");
  $("#tblePagedList tr:odd").addClass("row2");
  </code></pre>
  
  <p>This works fine except when I do a search and refresh my grid via an Asyncronous call to the server with Ajax, this particular styling disappears.</p>
  
  <p>The form is reloaded with the following jquery;</p>
  
  <pre><code>   var ajaxFormSubmit = function () {
          var $form = $(this);
  
          var options = {
              url: $form.attr("action"),
              type: $form.attr("method"),
              data: $form.serialize()
          };
  
          $.ajax(options).done(function (data) {
              var $target = $($form.attr("data-scd-target"));
              var $newHtml = $(data);
              $target.replaceWith($newHtml);
              $newHtml.effect("highlight");
          });
  
          return false;
      };
  </code></pre>
  
  <p>One attempted solution was to copy and paste the 2 styling lines in the done function above, but this made no difference.</p>
  
  <p>My form looks like;</p>
  
  <pre><code>@using SCD.Helpers
  @model IPagedList&lt;SCD.ViewModels.SubcontractorLineViewModel&gt;
  
  @{
      ViewBag.Title = "List Subcontractors";
      Layout = "~/Views/Shared/_Layout.cshtml";
  }
  &lt;fieldset&gt;
  &lt;legend&gt;Subcontractors&lt;/legend&gt;
  
  &lt;p&gt;
      @Html.ActionLink("Create New", "Create")
  &lt;/p&gt;
  
      &lt;form method="get" action="@Url.Action("ListSubcontractors")" 
            data-scd-ajax="true" data-scd-target="#subcontractorList"&gt;
          &lt;table class="searchTable"&gt;
              &lt;tr&gt;
                  &lt;td&gt;Company: &lt;input type="text" name="searchCompany" /&gt;&lt;/td&gt;
                  &lt;td&gt;Address: &lt;input type="text" name="searchAddress" /&gt;&lt;/td&gt;
                  &lt;td&gt;Town/City: &lt;input type="text" name="searchCity" /&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;County: &lt;input type="text" name="searchCounty" /&gt;&lt;/td&gt;
                  &lt;td&gt;Trade: &lt;input type="text" name="searchTrade" /&gt;&lt;/td&gt;
                  &lt;td&gt;Other Trade: &lt;input type="text" name="searchOtherTrade" /&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td colspan="2"&gt;@this.TempData["SearchMessage"].ToSafeString()&lt;/td&gt;
                  &lt;td&gt;&lt;input type="submit" value="Search" /&gt; &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/form&gt;
  @Html.Partial("_Subcontractors")
  
  &lt;/fieldset&gt;
  </code></pre>
  
  <p>My PartialView looks like</p>
  
  <pre><code>@model IPagedList&lt;SCD.ViewModels.SubcontractorLineViewModel&gt;
  &lt;div id="subcontractorList"&gt;
      &lt;div class="pagedList" data-scd-target="#subcontractorList"&gt;
          @Html.PagedListPager(Model, page =&gt; Url.Action("ListSubcontractors", new { page }),
          PagedListRenderOptions.DefaultPlusFirstAndLast)
      &lt;/div&gt;
      &lt;table id="tblePagedList"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;
                      Company
                  &lt;/th&gt;
                  &lt;th&gt;
                      Address
                  &lt;/th&gt;
                  &lt;th style="width:100px;"&gt;
                      Telephone
                  &lt;/th&gt;
                  &lt;th style="width:100px;"&gt;
                      Contact
                  &lt;/th&gt;
                  &lt;th style="width:100px;"&gt;
                      Trade
                  &lt;/th&gt;
                  &lt;th&gt;&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody id="tblePagedListBody"&gt;&lt;/tbody&gt;
          @foreach (var item in Model) {
              &lt;tr&gt;
                  &lt;td&gt;
                      @item.Company
                  &lt;/td&gt;
                  &lt;td&gt;
                      @item.AddressLine
                  &lt;/td&gt;
                  &lt;td&gt;
                      @item.Telephone
                  &lt;/td&gt;
                  &lt;td&gt;
                      @item.Contact
                  &lt;/td&gt;
                  &lt;td&gt;
                      @item.TradeName
                  &lt;/td&gt;
                  &lt;td&gt;
                      @Html.ActionLink("Details", "DetailsSubcontractor", new { id = item.CompanyId })
                  &lt;/td&gt;
              &lt;/tr&gt;
          }
  
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>