AJAX在ASP.NET MVC中加載了PartialView-腳本多次運行

Question

我有一些局部視圖，所有這些視圖都有一些相似的類（.update，.save，.cancel），但是它們的目的不同。 在每個頁面上，我編寫一個腳本來處理這些類，並使用ajax加載PartialView。

一切正常，除了單擊按鈕重新加載頁面時，此頁面中的腳本運行兩次，再次單擊，腳本運行3次。

$('#gridcontainer').load("/webdata/bank", {}, function () {
    alert('Load page'); // alert run 1 time when page load, it normal
    $('body').on('click', '.save', function () { // this function run n time when i load page n time.
          var c = confirm('Do you want save?')
          if (c) {
               $(this).val('Edit').removeClass('save').addClass('update');
               var v = $(this).closest('tr').find('td');
               v.eq(1).find('span').removeClass('hide');
               v.eq(1).find('input').attr('type', 'hidden');
               v.eq(2).find('input.cancel').attr('type', 'hidden');

               var id = $(this).data('id');
               // more code
          }
     });
}

Answer 1

重新加載時，您應該刪除所有先前附加的事件，使用Jquery OFF

$('#gridcontainer').load("/webdata/bank", {}, function () {
    alert('Load page'); // alert run 1 time when page load, it normal
    $('body').off( "click", ".save").on('click', '.save', function () { // this function run n time when i load page n time.
          var c = confirm('Do you want save?')
          if (c) {
               $(this).val('Edit').removeClass('save').addClass('update');
               var v = $(this).closest('tr').find('td');
               v.eq(1).find('span').removeClass('hide');
               v.eq(1).find('input').attr('type', 'hidden');
               v.eq(2).find('input.cancel').attr('type', 'hidden');

               var id = $(this).data('id');
               // more code
          }
     });
}