<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type ="text/css">
#msgDiv {
border:1px solid #0094ff;
padding :50px;
margin:10px 10px;
width :200px;
}
</style>
<script src="Scripts/jquery-1.8.2.min.js"></script>
<script type ="text/javascript">
$(function () {
$("#msgDiv").click(function () { alert("我是div") });
//不管深克隆或是浅克隆。都会复制元素和其子元素
//浅克隆不会克隆事件
//注意：0级2级和jq事件都不会被复制
$("#clone1").click(function () {
var $newDiv = $("#msgDiv").clone();
$newDiv.insertAfter("#msgDiv");
});
//深克隆会连事件一起克隆
//注意：jq事件会复制，0级2级事件不会复制
$("#Button1").click(function () {
var $newDiv = $("#msgDiv").clone(true);
$newDiv.insertAfter("#msgDiv");
});
});
</script>
</head>
<body>
<input type ="button" id ="clone1" value ="浅克隆" />
<input type ="button" id ="Button1" value ="深克隆" />
<div id="msgDiv">
<span >用户名：</span>
<input type ="text" />
</div>
</body>
</html>