Question

我开始学习jquery，并想弄清楚如何克隆表单的某些部分。我有以下代码，并想知道为什么它只在我点击一次时才有效。如果我不止一次点击它就不会做任何事情。我做错了什么？

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Intranet</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
$( document ).ready(function() {
    var clonedTable = $("#test").clone();

     $( "a" ).click(function( event ) {
        $("#mydiv").append(clonedTable);
        });
    });
</script>
</head>

<body>
<table id="test">
    <tr>
        <td><input type="text" name="fname" id="fname"></td>
    </tr>
</table>
<a href="#">Clone</a>
<div id="mydiv">

</div>
</body>
</html>

Answer 1

这是因为元素只创建一次（在document.ready中） #mydiv附加了相同的元素。

如果您想要更多克隆，请执行以下操作：

$(document).ready(function() {
    $("a").click(function(event) {
        var clonedTable = $("#test").clone();
        $("#mydiv").append(clonedTable);
    });
});

Answer 2

如果要重用...附加第一个克隆的克隆，那么原始缓存版本将保留在缓存变量中

$( "a" ).click(function( event ) {
    $("#mydiv").append(clonedTable.clone());
});

目前正在进行的是您正在插入以前存储的内容

请注意，每次使用时都需要更改ID，因为ID必须是唯一的

Answer 3

这里有一个工作fiddle在click函数

定义克隆表

$(document).ready(function() {
    $("a").click(function(event) {
        var clonedTable = $("#test").clone();
        $("#mydiv").append(clonedTable);
    });
});

Answer 4

错误

var clonedTable在$(document).ready()

中创建

修复

根据@putvande的建议，如果您在clonedTable函数中创建click变量：

$(document).ready(function() {
    $("a").click(function(event) {
        var clonedTable = $("#test").clone();
        $("#mydiv").append(clonedTable);
    });
});

然后，每次点击然后将其附加到$('#test')，您就会创建$("#mydiv") 的新克隆。

警告：

创建克隆会带有ID，因此您可以执行以下三项操作之一：

设置ID - $("#test").clone().attr('id', 'newID');

删除ID - $("#test").clone().attr('id', '');

不要按ID选择元素（例如：按类别） - $(".selector").clone()

原因

在clonedTable内创建$(document).ready()将引用克隆元素，无论发生什么情况。

使用jquery克隆表单

4 个答案:

错误

修复

原因