javascript - 使用 jQuery 克隆具有动态添加值的表单元素

Question

我有一个类似于此的表格：

<fieldset id="user">
  <input type="text" id="firstName">
  <input type="text" id="lastName">
</fieldset>

然后我执行 Ajax 调用来填充这两个字段的值。此时，我想保存表单的当前状态（使用填充的值），以防用户在进行更改后需要恢复。

我试过这个：

$("#user").clone(true).html()

还有这个：

$("#user").html()

两者都从填充字段之前创建的 dom 返回原始 html。有没有办法在用 JS 填充值后获取带有值的 html？

Answer 1

您可以使用内置数据。在进行 ajax 调用的地方，也将值存储在元素的数据中：

$.data( $("#firstname"), "value", value );
$.data( $("#lastname"), "value", value );

在您想要还原更改时：

$("#firstname").val( $.data($("#firstname"), "value") );
$("#lastname").val( $.data($("#lastname"), "value") );

还原时，您也可以遍历 x 个元素

$("#user input").each( function() {
   $(this).val( $.data($(this), "value") );
});

Answer 2

var prev = $('#user').html(); // store previous state

$.ajax({
  url: '',
  ....
  ....
  success: function(res) {
    //assume that your res is like:
    /**
    res = {
        firstname: 'FIRSTNAME', 
        lastname : 'LASTNAME'
    }
    */
    $('#user input#firstname').val(res.firstname);
    $('#user input#lastname').val(res.lastname);
  } 
})

//For revert:

$('#user').empty().html(prev);