Question

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

我用firebug检查了每行生成的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 });
}

Answer 1

如果我理解正确的话。

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

使用.click

更改您的.live活动

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

Answer 2

我想你可能需要再次调用click处理程序，以便将它重新附加到新的DOM元素，因为当你实际调用{{{{{jQuery）时，jQuery会使用正确的类遍历所有元素。 1}}和$(".RemoveLink").click()函数，只要点击某些内容就不会懒惰。

Answer 3

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

以及！如果是的话，只要PartialView再次呈现自己（无论是什么原因），它的所有绑定事件都将消失！然后你应该在渲染PartialView之后再次重新绑定它们。

有不同的方法，例如：

在Ajax.ActionLink（或任何ajax调用，使得 PartialView重新渲染）将OnSuccess设置为jquery函数重新绑定PartialView的事件。
从单独的.js移动所有jquery事件绑定代码脚本文件到PartialView文件（cstml）的内部。在这种情况每次呈现PartialView时，这些事件将再次受到约束。

ASP.NET MVC 3 - Ajax更新表 - 模型

3 个答案: