【发布时间】：2013-05-22 00:25:40
【问题描述】：
我想复制一个 div 及其所有内容，以生成一个克隆的 div（例如，动态地向发票添加行）。我需要克隆 div 的内容，包括 html 控件、动态 ID 和 DIV 中元素的侦听器！！
有没有简单的方法来做到这一点？谢谢！
代码有效，但它没有克隆整个 DIV 它还克隆文本框 ID 可以帮助我。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<style>
body
{
background: none !important;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title> Dynamically create input fields- jQuery </title>
<link href="theme/css/ui/ui.base.css" rel="stylesheet" media="all" />
<link href="theme/css/themes/black_rose/ui.css" rel="stylesheet" title="style" media="all" />
<!--[if IE 6]>
<link href="theme/css/ie6.css" rel="stylesheet" media="all" />
<script src="theme/js/pngfix.js"></script>
<script>
/* Fix IE6 Transparent PNG */
DD_belatedPNG.fix('.logo, ul#dashboard-buttons li a, .response-msg, #search-bar input');
</script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
</script>
<script type="text/javascript">
$(function() {
var i = 1;
$('#addNew').live('click', function() {
var getParentId = $(this).closest('fieldset').attr('id');
var getParentId1 = $('#'+getParentId);
i = $('#'+getParentId+' p input').size();
if( i > 6 ) {
alert("Limitation upto 5");
return false;
}
$('<p><input type="text" id="p_new" name="p_new_' + i +'" value="" placeholder="I am New" /><a href="#" id="remNew">Remove</a> </p>').appendTo(getParentId1);
i++;
return false;
});
$('#remNew').live('click', function() {
if( i > 2 ) {
$(this).parents('p').remove();
i--;
}
return false;
});
// Duplicate Query Block
var addQueryBlock = $('#queryblock');
var j = $('#queryblockfld').size() + 1;
$('#addNewQueryBlock').live('click', function() {
if( j > 6 ) {
alert("Limitation upto 5");
return false;
}
$('<fieldset id="queryblock' + j +'" name="queryblock' + j +'"><legend>Query Block' + j + '</legend><div style="float:right;" id="addqueryblock"><a style="text-decoration: none;" href="#" id="remNewFieldset"> – </a><a style="text-decoration: none;" href="#" id="addNewQueryBlock">+</a></div><div id="addinput"><p><input type="text" id="p_new1" name="p_new" value="" placeholder="Input Value" /><a href="#" id="addNew">Add</a><input type="text" id="input2" name="input2" value="" placeholder="input2" /></p></div></fieldset>').appendTo(addQueryBlock);
j++;
return false;
});
$('#remNewFieldset').live('click', function() {
if( j > 2 ) {
$(this).parents('fieldset').remove();
j--;
}
return false;
});
});
</script>
</head>
<body>
<h2>
Dynamically Add Another Input Box
</h2>
<div id="queryblock">
<fieldset id="queryblockfld" name="queryblockfld">
<legend>
Query Block
</legend>
<div style="float:right;" id="addqueryblock">
<a style="text-decoration: none;" href="#" id="addNewQueryBlock">+</a></div>
<div id="addinput">
<p>
<input type="text" id="p_new3" name="p_new3" value="" placeholder="Input Value" />
<a href="#" id="addNew"> Add </a> Wlcome to my world
<input type="text" id="input2" name="input2" value="" placeholder="input2" />
</p>
</div>
</fieldset>
</div>
</body>
</html>
【问题讨论】：
-
简单使用jQuery
.clone()方法:) -
但是 DIV 中的 Input 字段会被克隆到新名称吗？请检查以下 URL 我也尝试过 jsfiddle.net/kXmpY 但有点粘。
-
好吧，如果您想附加动态 ID 和侦听器，那么您的问题是不正确的。您不是要克隆元素 :) 您想要的是能够创建具有某些参数的 HTML 元素。我认为你需要建立一个工厂...... :)
-
我只是想办法做到这一点。我觉得我做了一些什么但不是完整的功能。
标签： javascript jquery html clone jquery-clone