jquery - Jquery在将表单输入重写为doc时将它们存储在变量中，它们具有原始值

Question

我正在使用 jQuery 为印刷店构建模板表单。用户可以填写表格并单击“预览”按钮。此时，我将表单存储在一个变量中，并使用 replaceWith() 重写文本输入，以将输入从表格单元格中交换出来，并将其替换为它的值。此时我会显示一个“编辑更多”按钮，以防他们想重新考虑他们的输入。所以，...然后我将存储变量中的 html 写回表单，但令人惊讶的是，文本输入值是用户输入之前的原始默认值。这是一个相当复杂的项目。我讨厌发布代码，因为我觉得这只会使讨论复杂化。我希望有人已经有过这种经历，所以知道发生了什么！:-) 谢谢大家。

Answer 1

如果我正确理解您的要求，我会使用 jQuery 的.detach()方法重写您的一些代码。它使您可以将通常要删除的元素存储到变量中，以便以后可以将它们重新插入到 DOM 中。

您仍然可以将分离的元素作为常规 jQuery 对象进行交互，但您不会在页面上看到它们。

这是一个例子：

<script>
$(function(){

    var detachedInput = '';
    var detachedBtn = '';

    $('#preview').click(function(){
        // store elements for later use
        detachedInput = $('#input').detach();
        detachedBtn = $(this).detach();

        // whatever you're trying to do with the output
        //...this is just an example, and not a very good one at that
        $('body').html($(detachedInput).val());
        $('<button>Edit</button>').appendTo('body')
            .click(function(){
                $('body').empty()
                    .append(detachedInput)
                    .append(detachedBtn);
            });
    });

});
</script>

<input id='input' />
<button id='preview'>Preview</button>

作为旁注，发布一些代码通常会有所帮助，因为它可以让每个人更好地了解您正在尝试做什么。