title: ASP.NET MVC 3 - Ajax update table - model
body: <p>I am trying to update a record list with ajax, represented on a table, where each record as an javascript delete link. If I preload the table, the RemoveLink works fine, but once the div "RecordListPartialView" is updated via ajax, It no longer works.</p>
  
  <p>I checked with firebug that the generated html code is correct for each row. It looks like the browser isn't aware of the new code and so it doesn't trigger the javascript links.</p>
  
  <p>Can someone please explain me what is going on?</p>
  
  <p>(1) Here is the View code:</p>
  
  <pre class="lang-js prettyprint-override"><code>$(".RemoveLink").click(function () {
      var _id = $(this).attr("data-id");
      var recordToDelete = { id: _id };
      var json = $.toJSON(recordToDelete);
      $.ajax({
          url: '/MortagePayment/RemoveMortageRecord',
          type: 'POST',
          dataType: 'json',
          data: json,
          contentType: 'application/json; charset=utf-8',
          success: function (data) {
              $("#RecordListPartialView").empty();
              $("#RecordListPartialView").html(data.Message);
          }
      });
  });
  $(".AddLink").click(function () {
      var _year = $("#NewRecord_year").val();
      var _month = $("#NewRecord_month").val();
      var _mortageValue = $("#NewRecord_mortageValue").val();
      var newRecord = { year: _year, month: _month, mortageValue: _mortageValue };
      var json = $.toJSON(newRecord);
      $.ajax({
          url: '/MortagePayment/AddMortageRecord',
          type: 'POST',
          dataType: 'json',
          data: json,
          contentType: 'application/json; charset=utf-8',
          success: function (data) {
              $("#RecordListPartialView").empty();
              $("#RecordListPartialView").html(data.Message);
  
              $("#NewRecord_year").val(0);
              $("#NewRecord_month").val(0);
              $("#NewRecord_mortageValue").val(0);
          }
      });
  });
  </code></pre>
  
  
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="RecordListPartialView"&gt;
      @Html.Partial("MortageRecordList", Model.MortageRecordList)
  &lt;/div&gt;
  </code></pre>
  
  <p>(2) the Partial View</p>
  
  
  
  <pre class="lang-html prettyprint-override"><code>&lt;table id="mortageRecordListTable"&gt;
      &lt;tr&gt;
          &lt;th colspan=4&gt;Current reductions&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;th&gt;Year&lt;/th&gt;
          &lt;th&gt;Month&lt;/th&gt;
          &lt;th&gt;Value&lt;/th&gt;
          &lt;th&gt;&lt;/th&gt;
      &lt;/tr&gt;
  
      @foreach (var item in Model) {
          &lt;tr id="row-@item.mortageRecordId"&gt;
              &lt;td&gt;
                  @item.year
              &lt;/td&gt;
              &lt;td&gt;
                  @item.month
              &lt;/td&gt;
              &lt;td&gt;
                  @item.mortageValue
              &lt;/td&gt;
              &lt;td&gt;                
                  &lt;p class="RemoveLink" data-id="@item.mortageRecordId"&gt;Remove&lt;/p&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      }              
  &lt;/table&gt;
  </code></pre>
  
  <p>(3) and the Controller:</p>
  
  <pre class="lang-cs prettyprint-override"><code>[HttpPost]
  public ActionResult AddMortageRecord(MortageRecord newRecord) {
      var mortageRecordSet = MortageRecordSet.GetMortageSet(this.HttpContext);
      if (ModelState.IsValid) 
          mortageRecordSet.AddMortageRecord(newRecord);
      string partialViewHtml = RenderPartialViewToString("MortageRecordList", mortageRecordSet.GetMortageItems());
  
      return Json(new { Success = true, Message = partialViewHtml });
  }
  
  [HttpPost]
  public JsonResult RemoveMortageRecord(int id) {
      var mortageRecordSet = MortageRecordSet.GetMortageSet(this.HttpContext);
      mortageRecordSet.RemoveMortageRecord(id);              
      string partialViewHtml = RenderPartialViewToString("MortageRecordList", mortageRecordSet.GetMortageItems());
  
      return Json(new { Sucess = true, Message = partialViewHtml });
  }
  </code></pre>