点击按钮克隆带文本框的HTML行，回发后消失求解决方案

这个问题我太熟了——动态添加的DOM元素在回发后消失是Web开发里很常见的坑，本质是因为回发时服务器会重新生成整个页面，它根本不知道你在客户端通过JS动态加了这些元素。要保留这些克隆行，核心思路是把动态行的数据同步到表单的可提交字段中，让服务器能接收并在回发后重新渲染这些行。下面给你一套具体的实现方案：

第一步：修改客户端代码，同步克隆行数据到隐藏字段 #

我们需要新增一个隐藏字段来存储所有克隆行的数据，每次添加/修改克隆行时更新这个字段，确保提交表单时数据能被服务器接收。

修改你的jQuery代码如下：

$(document).ready(function () {
    // 从服务器端获取回发前保存的克隆行数据（回发后会用到）
    var savedRows = JSON.parse($('#hidden-clone-data').val() || '[]');
    var count = savedRows.length;

    // 页面加载时，根据保存的数据重新渲染克隆行
    savedRows.forEach(function(rowData, index) {
        addCloneRow(index + 1, rowData.inputValue);
    });

    $('#add-button').click(function (e) {
        e.preventDefault();
        count++;
        // 添加新的克隆行
        var newRow = addCloneRow(count, '');
        // 更新隐藏字段的数据
        updateHiddenCloneData();
    });

    // 监听所有克隆行的文本框变化，实时更新隐藏字段
    $(document).on('input', '.chiller-record input[type=text]', function() {
        updateHiddenCloneData();
    });

    // 封装添加克隆行的函数
    function addCloneRow(id, inputValue) {
        var template = $('.chiller-record').clone();
        template.attr('id', 'VI' + id);
        template.find('input[type=text]').val(inputValue);
        template.find('input[type=hidden]').val(id);
        // 把克隆行添加到页面（这里假设你是追加到某个容器，比如#rows-container）
        $('#rows-container').append(template);
        return template;
    }

    // 更新隐藏字段的克隆行数据
    function updateHiddenCloneData() {
        var rowData = [];
        $('#rows-container .chiller-record').each(function() {
            rowData.push({
                id: $(this).find('input[type=hidden]').val(),
                inputValue: $(this).find('input[type=text]').val()
            });
        });
        $('#hidden-clone-data').val(JSON.stringify(rowData));
    }
});

同时，在你的HTML表单中添加这个隐藏字段：

<input type="hidden" id="hidden-clone-data" name="hidden-clone-data" value="" />

第二步：服务器端处理（以ASP.NET为例） #

当表单提交回服务器时，你需要接收hidden-clone-data的值，把它保存到ViewState或者其他持久化存储中，这样回发后页面加载时可以把数据传递回客户端：

protected void Page_Load(object sender, EventArgs e)
{
    if (IsPostBack)
    {
        // 获取客户端提交的克隆行数据
        string cloneData = Request.Form["hidden-clone-data"];
        // 保存到ViewState，供页面重新渲染时使用
        ViewState["CloneRowsData"] = cloneData;
    }
}

// 在页面渲染时，把保存的数据输出到隐藏字段
protected string GetCloneRowsData()
{
    return ViewState["CloneRowsData"]?.ToString() ?? "[]";
}

然后在HTML的隐藏字段中绑定这个值：

<input type="hidden" id="hidden-clone-data" name="hidden-clone-data" value='<%= GetCloneRowsData() %>' />

关键原理说明 #

• 客户端：每次操作克隆行（添加、修改）时，都把所有行的数据序列化到隐藏字段，确保提交时服务器能拿到完整的动态行数据。
• 服务器端：接收并保存这些数据，回发后再把数据传回客户端，客户端页面加载时根据数据重新生成所有克隆行。

这样就能保证回发后克隆行不会消失，而且文本框的内容也能被保留下来。

内容的提问来源于stack exchange，提问作者Zain