相同的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请求被多次发送

回答

相关问题