1

我正在尝试使用 ajax 更新记录列表，在表格上表示，其中每条记录作为 javascript 删除链接。如果我预加载表，RemoveLink 工作正常，但是一旦通过 ajax 更新 div“RecordListPartialView”，它就不再工作了。

我用萤火虫检查了生成的 html 代码对于每一行都是正确的。看起来浏览器不知道新代码，因此它不会触发 javascript 链接。

有人可以解释一下发生了什么吗？

(1) 这是查看代码：

$(".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) 局部视图

<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="row-@item.mortageRecordId">
            <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) 和控制器：

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

3 回答 3

3

如果我理解正确的话。

如果我预加载表，RemoveLink 工作正常，但是一旦通过 ajax 更新 div“RecordListPartialView”，它就不再工作了。

更改您的.click活动.live

$(".RemoveLink").live("click",function(){
    //any click event code comes here
});
于 2011-12-16T23:25:13.543 回答
0

好的，您是否在单独的 .js 脚本文件中有一个 jquery 事件，并将一个事件附加到 PartialView 内的元素？

出色地！如果是的话，每当 PartialView 再次呈现自己时（无论是什么原因），它的所有绑定事件都将消失！那么您应该在渲染 PartialView 后再次重新绑定它们。

有不同的方法，例如：

  1. 在Ajax.ActionLink（或使 PartialView 重新渲染的任何 ajax 调用）中，将 OnSuccess 设置为重新绑定 PartialView 事件的 jquery 函数。

  2. 将所有 jquery 事件绑定代码从单独的 .js 脚本文件移动到 PartialView 文件 (cstml) 的内部。在这种情况下，每次渲染 PartialView 时，这些事件都会再次绑定。

于 2013-04-10T04:29:38.437 回答
0

我认为$(".RemoveLink").click()您可能需要再次调用单击处理程序才能将其重新附加到新的 DOM 元素，因为当您实际调用and$(".AddLink").click()函数时，jQuery 会遍历所有具有正确类的元素，而不是在单击某些内容时懒惰地进行。

于 2011-12-16T23:14:30.680 回答