тот же запрос jquery ajax отправляется несколько раз

Question

У меня динамически созданная таблица. В каждой строке этой таблицы есть ссылка «обновление». Когда я нажимаю на эту ссылку, все работает нормально, но я вижу в консоли сети (F12), что он генерирует несколько 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 
      }); 
     }); 
    }); 
}); 

Answer 1

Основная ошибка: У вас есть несколько элементов с 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); 

Второй подход - переместить эту функцию за пределами вашего АЯКС вызова, 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 
     }); 
    }); 

Answer 2

Вы можете создать несколько <a> связи с тем же id='update', что неверно и может генерировать эту ошибку. Попробуйте изменить на class='update'.