Динамически генерируемая таблица продолжает умножаться, даже если она очищается

Question

У меня есть множество полей, которые я добавляю в таблицу (#dvdCollectionBody) в моей функции loadDvdCollectionView ().

Проблема: если я щелкаю тег, который вызывает мою функцию displayDvd (), то нажмите кнопку «Назад», все работает как надо. Если я щелкну тег, вызывая displayDvd () второй раз, а затем снова нажму кнопку «Назад», таблица будет дублирована, указывая, что добавляются строки, которые не очищаются.

Я не могу на всю жизнь я понимаю, почему таблица продолжает добавлять себя, но только после повторения процесса нажатия на тэг 'td' более одного раза.

$(document).ready(function () {

    loadDvdCollectionView();

    // create on a click
    createDvd();

});

function loadDvdCollectionView(){
  // hide errors
  $('#errorDiv').hide(); 

  // show this view 
  $('#viewingTable').show(); 

  // empty table body of any preexisting data
  $('#dvdCollectionBody').empty();

  $.ajax({
  type: "GET",
  url: "http://localhost:8080/dvds",

  success:
  function (data, status) { $.each(data, function (index, dvd) { 
  
  // append DVD collection to table rows in #dvdCollectionBody 
  var dvdRow = '<tr><td onclick="displayDvd(' + dvd.dvdId + ')">' + .......

$('#dvdCollectionBody').append(dvdRow);
  });
}

// called when <td> tag is clicked

function displayDvd(dvdId){

    //hide viewingTable 
    $('#viewingTable').hide();

    // empty preexisting data 
    $('#releaseYearDisplay, #directorDisplay, #ratingDisplay, #notesDisplay, #dvdTitleHeader').empty(); 

    // show table 
    $('#dvdDetailsDisplay, #dvdTitleHeader').show();

    $.ajax({ 
    type: "GET", 
    url: "http://localhost:8080/dvd/" + dvdId, 
    success: function (data) { 
    $('#dvdTitleHeader').append('
    <h3>' + data.title + '</h3>'); $('#releaseYearDisplay').append('
    <h3>' + data.releaseYear + '</h3>'); $('#directorDisplay').append('
    <h3>' + data.director + '</h3>'); $('#ratingDisplay').append('
    <h3>' + data.rating + '</h3>'); $('#notesDisplay').append('
    <h3>' + data.notes + '</h3>'); }
    } 
    });
  
  
  $('#backButton').click(function(){
  
      // hide current display and header 
      $('#dvdDetailsDisplay, #dvdTitleHeader').hide();

      // load main view again 
      loadDvdCollectionView(); 
    }); 
}

Answer 1

Проблема в том, что этот фрагмент кода:

$('#backButton').click(function(){
  // hide current display and header 
  $('#dvdDetailsDisplay, #dvdTitleHeader').hide();

  // load main view again 
  loadDvdCollectionView(); 
}); 

находится внутри вашей функции displayDvd().

Так что при первом нажатии на <td>, Вызывается displayDvd() и добавляется обратный вызов #backButton. Затем вы нажимаете #backButton, вызывается функция обратного вызова, здесь все должно работать нормально. Однако, когда вы нажимаете <td> во второй раз, displayDvd() вызывается снова, и еще один щелчок обратного вызова добавляется к #backButton также. Здесь произошла ошибка. Теперь к вашему #backButton подключены 2 одинаковые функции обратного вызова. Поэтому, когда вы нажимаете на нее, вызываются одновременно 2 loadDvdCollectionView().

Просто переместите кусок кода в $(document).ready() обратный вызов, чтобы решить проблему.

Answer 2

Вы скрываете элементы DOM, но не удаляете их из DOM. Попробуйте следующее, чтобы удалить содержимое из dvdDetailsDisplay и dvdTitleHeader:

$('#backButton').click(function(){
    // hide current display and header 
    $('#dvdDetailsDisplay, #dvdTitleHeader').empty();

    // load main view again 
    loadDvdCollectionView(); 
});