jquery - Jqueryは、ドキュメントへの書き換え時にフォーム入力を変数に保存し、元の値を持っています

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>

補足として、いくつかのコードを投稿すると、通常、何をしようとしているのかをよりよく理解できるようになります。