你怎麼複製修改後的輸入值與jQuery

Question

我有一個非常複雜的形式，我通過抓取表單的整個.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); 
}); 

你如果CL ick複製它與未修改的值正常工作，但如果您在其中鍵入一個新的值。我意識到輸入值不會修改HTML，同樣用jQuery的.val（）編輯值也不能解決問題。是否可以將輸入框中的值複製到實際的DOM中，以便使用jQuery的.html（）函數進行正確複製？

Answer 1

使用clone() ..複製元件

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

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

然而..因爲你與id作爲原始..你將最終具有相同ID的兩個元件克隆在div這無效...所以它更好地更改克隆元素的ID，以便ID是唯一的

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

fiddle here

Answer 2

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

是複製HTML的更好方法。

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