Переменная Javascript "не очищена" при изменении страницы Ajax

Question

Я запускаю приложение CRUD, работающее с php / js, которое зависит от изменения страницы ajax.Внутри «Добавить представление» есть простая таблица и кнопка, которая вставляет новую строку каждый раз, когда вы нажимаете на нее.

При первой загрузке, когда я нажимаю на кнопку, она добавляет одну строку, я сохраняюи он загружает представление списка (благодаря вызову ajax).Затем, когда я во второй раз обращаюсь к «представлению добавления» и нажимаю кнопку, которая должна добавить одну строку, она добавляет две строки и т. Д. После каждой загрузки страницы.

Здесь мой код js должен добавитьодна строка в моей таблице:

$('body').on('click', '#delivery_grid_add_row', function(){
   var markup = '';
   markup+= '<tr>';
   markup+= '<td>';
   markup += 'hello world';
   markup+= '</td>';
   markup+= '</tr>';
   $('tbody').append(markup);
});

Я знаю, что мое объяснение не очень понятно, поскольку английский не является моим родным языком, но не стесняйтесь, дайте мне знать, если вам нужна дополнительная информация.

Answer 1

используйте .html, а не .apppend, это может решить вашу проблему.Добавить всегда добавлять элементы после предыдущего элемента, чтобы он содержал ваш предыдущий HTML.Вместо использования append используйте html, который заменит ваш предыдущий html

$('body').on('click', '#delivery_grid_add_row', function(){
   var markup =  $('tbody').html();
   markup+= '<tr>';
   markup+= '<td>';
   markup += 'hello world';``
   markup+= '</td>';
   markup+= '</tr>';
   $('tbody').html(markup);
});