Question

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.

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.

Can someone please explain me what is going on?

(1) Here is the View 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);
        }
    });
});

<div id="RecordListPartialView">
    @Html.Partial("MortageRecordList", Model.MortageRecordList)
</div>

(2) the Partial View

<table id="mortageRecordListTable">
    <tr>
        <th colspan=4>Current reductions</th>
    </tr>
    <tr>
        <th>Year</th>
        <th>Month</th>
        <th>Value</th>
        <th></th>
    </tr>

    @foreach (var item in Model) {
        <tr id="[e-mail]">
            <td>
                @item.year
            </td>
            <td>
                @item.month
            </td>
            <td>
                @item.mortageValue
            </td>
            <td>                
                <p class="RemoveLink" data-id="@item.mortageRecordId">Remove</p>
            </td>
        </tr>
    }              
</table>

(3) and the Controller:

[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 });
}

Answer 1

If I understand you correctly.

If I preload the table, the RemoveLink works fine, but once the div
“RecordListPartialView” is updated via ajax, It no longer works.

Change your your .click event with .live

$(".RemoveLink").live("click",function(){
    //any click event code comes here
});