ASP.NET MVC 3 - Ajaxの更新テーブル - モデル

Question

テーブルに表示された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 }); 
} 

Answer 1

私はあなたを正しく理解しています。

私はテーブルをプリロードした場合、RemoveLinkが正常に動作しませんが、DIV 「RecordListPartialViewが」AJAXを介して更新されると、それはもはや機能します。

変更.live

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

Answer 2

I と考えると、実際に$(".RemoveLink").click()との関数を呼び出すときに、jQueryが正しいクラスのすべての要素を繰り返し処理するため、新しいDOM要素に再接続するためにクリックハンドラを再度呼び出す必要があります。何かがクリックされます。

Answer 3

OKを使用して、あなた.clickイベント、あなたが別々の.jsスクリプトファイルにjqueryのイベントがあり、PartialView内部の要素にイベントを添付しているのですか？

よく！はいの場合は、PartialViewが（何が原因であろうと）再びそれ自身をレンダリングするたびに、すべてのバインドされたイベントはなくなります。 PartialViewをレンダリングした後、再度それらを再バインドする必要があります。

異なるアプローチは、例えば、があります。Ajax.ActionLink（または PartialView再レンダリングする任意のAJAX呼び出し）で

1. は がPartialViewのイベントを再バインドすることをjqueryの関数にONSUCCESS設定。

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