0

フォームの .html() 全体を取得して、印刷ビューにコピーする非常に複雑なフォームがあります。全体的にはうまく機能しますが、変更された値ではなく、入力フィールドの最初にレンダリングされた値を取得するという問題が発生しています。

ここで私の問題を説明しました: http://jsfiddle.net/GAfrU/

CSS

#perform_copy {
width: 48px;
height: 24px;
background-color: #d7d7d7;
cursor: pointer;
padding: 0px 8px;
}

HTML

<div id="original">
    <input type="text" value="100"></input>
</div>
<div id="copy">
    </div>
<div id="perform_copy">Copy</div>

JS

function copy() {
   $("#copy").html($("#original").html());
}

$(document).ready(function() {
    $("#perform_copy").click(copy);
});

コピーをクリックすると、変更されていない値で適切に機能しますが、新しい値を入力すると機能します。値を入力しても HTML は変更されず、同様に jQuery の .val() で値を編集しても問題は解決しないようです。入力ボックスから実際の DOM に値をコピーして、jQuery の .html() 関数を使用して適切にコピーする方法はありますか?

4

2 に答える 2

0 
$('#original').clone().appendTo('#copy');

HTML をコピーするより良い方法です。

http://api.jquery.com/clone/

于 2013-07-13T18:05:24.953 に答える
0

.. を使用clone()して要素をコピーします

function copy() {
   $("#copy").html($("#original").clone());
}

$(document).ready(function() {
  $("#perform_copy").click(copy);
});

ただし..元のIDでdivを複製しているため..同じIDを持つ2つの要素が無効になるため、IDが一意になるように複製された要素のIDを変更することをお勧めします

function copy() {
   $("#copy").html($("#original").clone().prop('id','copyoriginal'));
}

ここでフィドル

于 2013-07-13T18:07:39.883 に答える