1

テーブルに表示されているajaxでレコードリストを更新しようとしています。各レコードはjavascriptの削除リンクです。テーブルをプリロードすると、RemoveLinkは正常に機能しますが、div "RecordListPartialView"がajaxを介して更新されると、機能しなくなります。

生成されたhtmlコードが各行に対して正しいことをfirebugで確認しました。ブラウザは新しいコードを認識していないため、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は正常に機能しますが、div "RecordListPartialView"がajaxを介して更新されると、機能しなくなります。

.clickイベントを変更する.live

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

jQueryは、実際にand関数を呼び出すときに、何かがクリックされるたびに遅延するのではなく、正しいクラスですべての要素を反復処理するため、新しいDOM要素に再アタッチするためにクリックハンドラーを再度呼び出す必要があると思います。$(".RemoveLink").click()$(".AddLink").click()

于 2011-12-16T23:14:30.680 に答える
0

OK、別の.jsスクリプトファイルにjqueryイベントがあり、PartialView内の要素にイベントを添付しましたか？

良い！はいの場合、PartialViewが再びレンダリングされるたびに（理由が何であれ）、バインドされたイベントはすべてなくなります。次に、PartialViewをレンダリングした後、それらを再度バインドする必要があります。

たとえば、さまざまなアプローチがあります。

  1. （またはPartialViewを再レンダリングするajax呼び出し）で、Ajax.ActionLinkOnSuccessをPartialViewのイベントを再バインドするjquery関数に設定します。

  2. すべてのjqueryイベントバインディングコードを、個別の.jsスクリプトファイルからPartialViewのファイル（cstml）内に移動します。この場合、PartialViewがレンダリングされるたびに、それらのイベントが再度バインドされます。

于 2013-04-10T04:29:38.437 に答える