jquery学习之1.15-克隆节点

浏览数：18 / 时间：2015年06月09日

克隆节点所用方法如下，主要区分是否克隆节点自带的事件，克隆节点同时克隆时间需要在clone(true)

代码如下：

 1 <%@ page language="java" import="java.util.*"
 2  pageEncoding="utf-8"%>
 3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 4 <html>
 5   <head>
 6   <title>11</title>    
 7   <style type="text/css">
 8   .one {width:30%;height:20%;background:#ff00ff;}
 9   </style>
10   <script type="text/javascript" src="../js/jquery-1.11.0.js">
11   </script>
12   <script language="javascript">
13    $(document).ready(function()
14   {      
15       
16      $("#bt1").click(
17      function()
18      {                  
19      //***********复制li，但是没复制事件*****************************
20       $("li").clone().insertAfter($("#bt2"));      
21       
22            }
23      ); 
24      
25       $("#bt2").click(
26      function()
27      {                  
28      //***********复制li，同时复制事件*****************************
29       $("li").clone(true).insertAfter($("#bt2"));      
30       
31            }
32      ); 
33      $("li").click(function(){
34      
35      alert($(this).text());
36      });
37       
38    });  
39   </script>
40   </head> 
41   <body>
42     <input type="button"  id="bt1" value="复制li，但是没复制事件" ></input>   
43      <input type="button"  id="bt2" value="复制li，同时复制事件" ></input>   
44    <ul id="select">
45     <li id="li1">选择1</li>
46     <li id="li2">选择2</li>
47     <li id="li3">选择3</li>
48     <li id="li4">选择4</li>
49     <li id="li5">选择5</li>
50    </ul>
51     <div id="div1" title="第一个div" style="border:1px solid;width:20%;height:30%;float:left">div1</div> 
52      <br>
53   </body>
54 </html>