通過DOM元素

Question

所以這是我的功能，如果你點擊表格的某些部分刪除從列表循環：

function ParticipantsDeleteClick(model, url) { 
for (i in model.Participants) { 
    $("#delete" + i).click(function() { 
     $.ajax({ 
      url: url, 
      type: 'POST', 
      contentType: 'application/json; charset=utf-8', 
      data: JSON.stringify({ id: model.Participants[i].Id }), 
      success: function (result) { 
       result ? $("#participant" + i).remove() : alert("Delete failed"); 
      }, 
      error: function() { 
       alert("Could not get a response from the server."); 
      } 
     }); 
    }); 
} 

}

出於某種原因，它並不重要你點擊哪個人，它總是會從列表中刪除最後一個人。而且它只能工作一次，因爲一旦最後一個「我」被刪除，每隔一個點擊函數就會用最後一個i的值指向那個dom元素。

我不知道爲什麼每次我添加一個點擊函數，它都指向循環中最後一個值。我修改了功能，並補充說了我的整數值的臨時變量並沒有工作之一：

function ParticipantsDeleteClick(model, url) { 
for (i in model.Participants) { 
    var temp = parseInt(i); 
    $("#delete" + temp).click(function() { 
     $.ajax({ 
      url: url, 
      type: 'POST', 
      contentType: 'application/json; charset=utf-8', 
      data: JSON.stringify({ id: model.Participants[temp].Id }), 
      success: function (result) { 
       result ? $("#participant" + temp).remove() : alert("Delete failed"); 
      }, 
      error: function() { 
       alert("Could not get a response from the server."); 
      } 
     }); 
    }); 
} 

}

所以我不知道我怎麼能得到這個工作。

Answer 1

i總是被覆蓋在循環中。您需要關閉，例如使用$.each(function(){..}，或者將環路的主體包裝在自我調用功能中。

function ParticipantsDeleteClick(model, url) { 

    $.each(model.Participants, function(i){ //The `function` creates a closure 
     $("#delete" + i).click(function() { 
      $.ajax({ 
       url: url, 
       type: 'POST', 
       contentType: 'application/json; charset=utf-8', 
       data: JSON.stringify({ id: model.Participants[i].Id }), 
       success: function (result) { 
        result ? $("#participant" + i).remove() : alert("Delete failed"); 
       }, 
       error: function() { 
        alert("Could not get a response from the server."); 
       } 
      }); 
     }); 
    } 
} 

Answer 2

基本上，你需要引入一個閉包來捕獲我每次圍繞循環的值。使用$.each()將推出一個封閉的你（像這樣）

function ParticipantsDeleteClick(model, url) { 
    $.each(model.Participants, function(i,v) { 
     $("#delete" + i).click(function() { 
      $.ajax({ 
       url: url, 
       type: 'POST', 
       contentType: 'application/json; charset=utf-8', 
       data: JSON.stringify({ id: model.Participants[i].Id }), 
       success: function (result) { 
        result ? $("#participant" + i).remove() : alert("Delete failed"); 
       }, 
       error: function() { 
        alert("Could not get a response from the server."); 
       } 
      }); 
     }); 
    }); 
} 

Answer 3

你有3點範圍的水平位置：

1. 環路範圍
2. 單擊處理範圍
3. 阿賈克斯成功處理程序範圍

因此，您需要爲每個範圍保留並傳遞變量。 .bind()方法允許您將參數傳遞給外部作用域的回調函數，context參數允許您將參數傳遞給AJAX成功回調函數。所以：

$.each(model.Participants, function(index, participant) { 
    var data = { index: index, participant: participant }; 
    $('#delete' + index).bind('click', data, function(evt) { 
     // at this stage evt.data will point to what the data variable was pointing 
     // from the outer scope but at the moment this handler was bound 
     $.ajax({ 
      url: url, 
      type: 'POST', 
      contentType: 'application/json; charset=utf-8', 
      data: JSON.stringify({ id: evt.data.participant }), 
      context: evt.data.index, 
      success: function (result) { 
       // since we have used the context parameter at this stage 
       // this will point to this parameter which is simply the index 
       result ? $('#participant' + this).remove() : alert('Delete failed'); 
      }, 
      error: function() { 
       alert('Could not get a response from the server.'); 
      } 
     }); 
    }); 
}); 

或者打入不同的功能這更清楚：

function handleClick(evt) { 
    $.ajax({ 
     url: url, 
     type: 'POST', 
     contentType: 'application/json; charset=utf-8', 
     data: JSON.stringify({ id: evt.data.participant }), 
     context: evt.data.index, 
     success: ajaxSuccess, 
     error: ajaxError 
    }); 
} 

function ajaxSuccess(result) { 
    result ? $('#participant' + this).remove() : alert('Delete failed'); 
} 

function ajaxError() { 
    alert('Could not get a response from the server.'); 
} 

然後最後：

function ParticipantsDeleteClick(model, url) { 
    $.each(model.Participants, function(index, participant) { 
     var data = { index: index, participant: participant }; 
     $('#delete' + index).bind('click', data, handleClick); 
    }); 
}