jQuery has a clone()
function that clones the actual form with no problem, but it doesn't preserve any values that have been entered into the form.
jQuery有一个clone()函数可以克隆实际的表单而没有任何问题,但是它不保留已经输入到表单中的任何值。
Is there a way to get around this?
有办法解决这个问题吗?
Sample code would be much appreciated.
示例代码将非常感谢。
7 个解决方案
#1
24
ran into the same problem, simple solution:
碰到同样的问题,简单的解决方案:
// touch all input values
$('input:text').each(function() {
$(this).attr('value', $(this).val());
});
var clones = $('input:text').clone();
the trick is that this will change the actual 'value' attribute in the DOM tree, otherwise the data you enter 'on-the-fly' only exists in the DOM 'state'
诀窍是这将改变DOM树中的实际“值”属性,否则您“即时”输入的数据仅存在于DOM“状态”中
#2
8
Stemming from the notes, here's a solution. With the following form:
根据笔记,这是一个解决方案。使用以下表格:
<form id="old">
<textarea>Some Value</textarea>
<input type="text" value="Some Value" />
<input type="checkbox" value="bob" checked />
<br />
</form>
<input type="button" value="Clone" id="clone" />
This jQuery works, including the textareas:
这个jQuery有效,包括textareas:
$( 'input#clone' ).click(
function()
{
$( 'form#old textarea' ).text( $( 'form#old textarea' ).val() )
$("form#old").clone().attr( 'id', 'new_form' ).appendTo("body")
}
)
Demo: http://jsfiddle.net/Jux3e/
演示:http://jsfiddle.net/Jux3e/
#3
4
Another easy fix for the textarea values not being cloned is to include the following JavaScript file in your HTML: https://github.com/spencertipping/jquery.fix.clone
另一个未被克隆的textarea值的简单修复是在HTML中包含以下JavaScript文件:https://github.com/spencertipping/jquery.fix.clone
It just patches the clone method so you can include the file and then forget it's there. Apparently there is a problem with cloneing select values too and this same file fixes that problem as well.
它只是修补克隆方法,因此您可以包含该文件,然后忘记它。显然,克隆选择值也存在问题,同样的文件也修复了这个问题。
This file was linked to from: http://bugs.jquery.com/ticket/3016. The bug is 4 years old.
此文件链接到:http://bugs.jquery.com/ticket/3016。这个bug已经4年了。
#4
0
You may use this jQuery Plugin.
你可以使用这个jQuery插件。
/**
* clone element, including the textarea part
*/
$.fn.clone2 = function(val1, val2) {
// ret for return value, cur for current jquery object
var ret, cur;
ret = $(this).clone(val1, val2);
cur = $(this);
// copy all value of textarea
ret.find('textarea').each(function() {
var value_baru;
// use name attribute as unique id
value_baru = sek.find('[name="$name"]'.replace('$name', $(this).attr('name')))
.val();
// set the new value to the textarea
$(this).val(value_baru);
});
// return val
return ret;
}
#5
0
if you need to duplicate the field itself, check this tinny function relCopy
如果您需要复制字段本身,请检查此细节函数relCopy
#6
0
Found this problem and wrote this wrapper:
发现这个问题并编写了这个包装器:
$.fn.cloneField = function(withDataAndEvents) {
var clones = [];
this.each(function(){
var cln = $(this).clone(withDataAndEvents);
cln.val($(this).val());
clones.push(cln.get(0));
});
return jQuery( clones ); };
#7
0
Use this code to copy textarea values
使用此代码复制textarea值
clonedObject.find(textareaObject).val(originalObject.find(textareaObject).val());
#1
24
ran into the same problem, simple solution:
碰到同样的问题,简单的解决方案:
// touch all input values
$('input:text').each(function() {
$(this).attr('value', $(this).val());
});
var clones = $('input:text').clone();
the trick is that this will change the actual 'value' attribute in the DOM tree, otherwise the data you enter 'on-the-fly' only exists in the DOM 'state'
诀窍是这将改变DOM树中的实际“值”属性,否则您“即时”输入的数据仅存在于DOM“状态”中
#2
8
Stemming from the notes, here's a solution. With the following form:
根据笔记,这是一个解决方案。使用以下表格:
<form id="old">
<textarea>Some Value</textarea>
<input type="text" value="Some Value" />
<input type="checkbox" value="bob" checked />
<br />
</form>
<input type="button" value="Clone" id="clone" />
This jQuery works, including the textareas:
这个jQuery有效,包括textareas:
$( 'input#clone' ).click(
function()
{
$( 'form#old textarea' ).text( $( 'form#old textarea' ).val() )
$("form#old").clone().attr( 'id', 'new_form' ).appendTo("body")
}
)
Demo: http://jsfiddle.net/Jux3e/
演示:http://jsfiddle.net/Jux3e/
#3
4
Another easy fix for the textarea values not being cloned is to include the following JavaScript file in your HTML: https://github.com/spencertipping/jquery.fix.clone
另一个未被克隆的textarea值的简单修复是在HTML中包含以下JavaScript文件:https://github.com/spencertipping/jquery.fix.clone
It just patches the clone method so you can include the file and then forget it's there. Apparently there is a problem with cloneing select values too and this same file fixes that problem as well.
它只是修补克隆方法,因此您可以包含该文件,然后忘记它。显然,克隆选择值也存在问题,同样的文件也修复了这个问题。
This file was linked to from: http://bugs.jquery.com/ticket/3016. The bug is 4 years old.
此文件链接到:http://bugs.jquery.com/ticket/3016。这个bug已经4年了。
#4
0
You may use this jQuery Plugin.
你可以使用这个jQuery插件。
/**
* clone element, including the textarea part
*/
$.fn.clone2 = function(val1, val2) {
// ret for return value, cur for current jquery object
var ret, cur;
ret = $(this).clone(val1, val2);
cur = $(this);
// copy all value of textarea
ret.find('textarea').each(function() {
var value_baru;
// use name attribute as unique id
value_baru = sek.find('[name="$name"]'.replace('$name', $(this).attr('name')))
.val();
// set the new value to the textarea
$(this).val(value_baru);
});
// return val
return ret;
}
#5
0
if you need to duplicate the field itself, check this tinny function relCopy
如果您需要复制字段本身,请检查此细节函数relCopy
#6
0
Found this problem and wrote this wrapper:
发现这个问题并编写了这个包装器:
$.fn.cloneField = function(withDataAndEvents) {
var clones = [];
this.each(function(){
var cln = $(this).clone(withDataAndEvents);
cln.val($(this).val());
clones.push(cln.get(0));
});
return jQuery( clones ); };
#7
0
Use this code to copy textarea values
使用此代码复制textarea值
clonedObject.find(textareaObject).val(originalObject.find(textareaObject).val());