JQuery .html() не сохраняет входные значения

Question

У меня есть кнопка на моей веб-странице, при нажатии, делает следующее:

1. Получает содержимое «шаблон таблицы» по телефону .html() в этой таблице
2. Сохраняет содержимое выше вызова в переменной
3. ли глобальное заменить на этом переменном для отслеживания номера строки таблицы
4. Заменен содержимые добавляют в «реальную таблицу»

Проблема: значения, введенные пользователями в поля ввода в этих строках таблицы, не сохраняются. Вот код:

function addRowToCluesTable() { 
    var t = $("#template").html().replace(/{NUM}/g, stepCount); 
    var r = $("#real").html(); 
    $("#real").html(r + "\n\n" + t); 
} 

Это все работает отлично, за исключением, что любые поля ввода в «реальной» таблицы (без шаблона), содержащие значения, введенные пользователем, будут потеряны, и все значения возвращаются к значениям по умолчанию или порожнем состоянии. Итак, поток идет следующим образом: добавляется строка, значения введены в реальную таблицу, добавлена ​​еще одна строка, введены значения ... repeat.

Как я могу получить jquery для сохранения вводимых пользователем входных значений при динамическом добавлении строк? Вместо того, чтобы хранить реальное содержимое таблицы в переменной, следует ли вместо этого добавлять строки шаблонов в конец реальной таблицы? Если да, то каков наилучший способ сделать это?

Answer 1

Попробуйте добавить новый HTML вместо:

$('#real').append(t);