jquery学习之1.15-克隆节点
克隆节点所用方法如下,主要区分是否克隆节点自带的事件,克隆节点同时克隆时间需要在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>