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 克隆为原始 ..您最终将拥有两个具有相同 ID 的元素，这是无效的...所以最好更改克隆元素的 id，以便 ID 是唯一的

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

在这里摆弄

于 2013-07-13T18:07:39.883 回答