相同的jquery ajax請求被多次發送

我已經動態地創建了表。該表的每一行都有一個「更新」鏈接。當我點擊該鏈接時，一切正常，但我在控制檯網絡（F12）中看到它生成多個Ajax請求而不是一個（同一個請求正在多次發送）。你能否檢查下面的代碼並幫助我解決問題。相同的jquery ajax請求被多次發送

$('#load_table').click(function() { 
    $.get('cont/get_table', function (data) { 

     var item = $('<table>'); 

     $.each(data.results, function (i, res) { 

      var row = $('<tr>').append(
      $('<td class="a">').html(res.id), 
      $('<td class="b" contenteditable="true">').html(res.title), 
      $('<td class="c" contenteditable="true">').html(res.text), 
      $('<td>').html('<a href="#" class="update">Update</a>')); 
      item.append(row); 
     }); 

     $("#display").html(item); 

     $("body").on("click", ".update", function() { 

      var row = $(this).closest('tr'); 
      var id = row.find('td.a').text(); 
      var title = row.find('td.b').text(); 
      var text = row.find('td.c').text(); 

      $.post('cont/update_row', { 
       id: id, 
       title: title, 
       text: text 
      }, function (data) { 

       //display data 
      }); 
     }); 
    }); 
});

來源

2014-10-05 EducateYourself

基本錯誤：您有幾個id =「update」的元素。將其更改爲課程。

$.each(data.results, function (i, res) { 

    var row = $('<tr>').append(
    $('<td class="a">').html(res.id), 
    $('<td class="b" contenteditable="true">').html(res.title), 
    $('<td class="c" contenteditable="true">').html(res.text), 
    $('<td>').html('<a href="#" class="update">Update</a>')); 
    item.append(row); 

    row.on('click', '.update',function(){ 
    $.post('cont/update_row', { 
     id: res.id, 
     title: res.title, 
     text: res.text 
    }, function (data) { 

     //display data 
    }); 
}); 


$("#display").html(item);

第二條本辦法 - 移動該功能你的Ajax調用，baceuse之外，每個調用AOU正在添加另一個事件到你的更新按鈕。

$("body").on("click", ".update", function() { 
     var row = $(this).closest('tr'); 
     var id = row.find('td.a').text(); 
     var title = row.find('td.b').text(); 
     var text = row.find('td.c').text(); 

     $.post('cont/update_row', { 
      id: id, 
      title: title, 
      text: text 
     }, function (data) { 

      //display data 
     }); 
    });

來源

2014-10-05 15:02:52 Beri

感謝您的回答。實際上，它並沒有和'class'一起工作，我把'class'改成了'id'。現在我把它改回'班'，但問題仍然存在。你能檢查一下嗎？ – EducateYourself 2014-10-05 15:09:34

發現你的錯誤 - 我想。在ajax調用之外移動body.on（'click'）函數。每次你打電話時，你都會爲每個更新按鈕添加另一個事件。 – Beri 2014-10-05 15:23:28

是的，你找到了。非常感謝：） – EducateYourself 2014-10-05 15:30:54

您創建具有相同id='update'，這是不正確的，可能會產生這種錯誤多<a>鏈接。嘗試更改爲class='update'。

來源

2014-10-05 15:02:18

感謝您的回答。實際上，它並沒有和'class'一起工作，我把'class'改成了'id'。現在我把它改回'班'，但問題仍然存在。你能檢查一下嗎？ – EducateYourself 2014-10-05 15:10:09

相同的jquery ajax請求被多次發送

回答

相關問題