1 | <html> |
---|
2 | <head> |
---|
3 | <title>Clone event</title> |
---|
4 | <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> |
---|
5 | <script type="text/javascript"> |
---|
6 | $(function(){ |
---|
7 | |
---|
8 | // Checks for support of special characters in names. |
---|
9 | jQuery.support.noCloneAttribute = (function(){ |
---|
10 | var retrun = false; |
---|
11 | // Create an input with normal name, |
---|
12 | // adjust name with special characters stripped out by IE |
---|
13 | // and append it to the document. |
---|
14 | var item = jQuery("<input name='test' id='test' />").attr('name',"test[]").appendTo(document.body); |
---|
15 | // Get above input name and it should be 6 characters long. |
---|
16 | retrun = (jQuery("#test").clone().attr('name').length == 6); |
---|
17 | // Cleanup. |
---|
18 | jQuery(item).remove(); |
---|
19 | return retrun; |
---|
20 | })(); |
---|
21 | |
---|
22 | alert("TEST noCloneAttribute:\n\n" + jQuery.support.noCloneAttribute); |
---|
23 | |
---|
24 | $("#input1").attr('name',$("#input1").attr('name')+"[]"); |
---|
25 | $("#input2").attr('name',$("#input2").attr('name')+".test"); |
---|
26 | $("#input3").attr('name',$("#input3").attr('name')+" test"); |
---|
27 | |
---|
28 | alert("TEST NORMAL:\n\n" + document.getElementById("line").cloneNode(true).innerHTML); |
---|
29 | |
---|
30 | alert("TEST JQUERY old:\n\n" + $("#line").clone().html()); |
---|
31 | |
---|
32 | jQuery.fn.clone = jQuery.prototype.clone = function( events ) { |
---|
33 | // Do the clone |
---|
34 | var ret = this.map(function(){ |
---|
35 | if ( !jQuery.support.noCloneEvent && !jQuery.isXMLDoc(this) ) { |
---|
36 | |
---|
37 | // IE copies events bound via attachEvent when |
---|
38 | // using cloneNode. Calling detachEvent on the |
---|
39 | // clone will also remove the events from the orignal |
---|
40 | |
---|
41 | // In order to get around this, we use innerHTML. |
---|
42 | // Unfortunately, this means some modifications to |
---|
43 | // attributes in IE that are actually only stored |
---|
44 | // as properties will not be copied (such as the |
---|
45 | // the name attribute on an input). |
---|
46 | var html = this.outerHTML; |
---|
47 | if ( !html ) { |
---|
48 | var div = this.ownerDocument.createElement("div"); |
---|
49 | div.appendChild( this.cloneNode(true) ); |
---|
50 | html = div.innerHTML; |
---|
51 | } |
---|
52 | |
---|
53 | |
---|
54 | if(!jQuery.support.noCloneAttribute) { |
---|
55 | //Search all tags in outerHTML method |
---|
56 | jQuery.each(this.outerHTML.toString().match(/<[^<]*>/g),function(i,alltag){ |
---|
57 | //Foreach tag find an attribute name id |
---|
58 | var idtag=alltag.toString().match("id=[^ >]*"); |
---|
59 | if(idtag) { |
---|
60 | //If id exists get the id value |
---|
61 | idtag=idtag.toString().split("=")[1]; |
---|
62 | |
---|
63 | //Array Attributes who doens't change by javascripts methods like name in IE |
---|
64 | var attributes=['name']; |
---|
65 | |
---|
66 | //Foreach attribute declared above change to new values |
---|
67 | jQuery.each(attributes,function(j,attrs){ |
---|
68 | //Find old value of the object |
---|
69 | var old_value=alltag.toString().match(attrs+"=[^ >]*"); |
---|
70 | //Find new value of the object modified by any method |
---|
71 | var new_value=$("#"+idtag).attr(attrs); |
---|
72 | //If diferent values replace with new value |
---|
73 | if(old_value!=new_value) html=html.replace(old_value,attrs+"="+new_value); |
---|
74 | }); |
---|
75 | } |
---|
76 | }); |
---|
77 | } |
---|
78 | |
---|
79 | return jQuery.clean([html.replace(/ jQuery\d+="(?:\d+|null)"/g, "").replace(/^\s*/, "")])[0]; |
---|
80 | } else |
---|
81 | return this.cloneNode(true); |
---|
82 | |
---|
83 | }); |
---|
84 | |
---|
85 | // Copy the events from the original to the clone |
---|
86 | if ( events === true ) { |
---|
87 | var orig = this.find("*").andSelf(), i = 0; |
---|
88 | |
---|
89 | ret.find("*").andSelf().each(function(){ |
---|
90 | if ( this.nodeName !== orig[i].nodeName ) |
---|
91 | return; |
---|
92 | |
---|
93 | var events = jQuery.data( orig[i], "events" ); |
---|
94 | |
---|
95 | for ( var type in events ) { |
---|
96 | for ( var handler in events[ type ] ) { |
---|
97 | jQuery.event.add( this, type, events[ type ][ handler ], events[ type ][ handler ].data ); |
---|
98 | } |
---|
99 | } |
---|
100 | |
---|
101 | i++; |
---|
102 | }); |
---|
103 | } |
---|
104 | |
---|
105 | // Return the cloned set |
---|
106 | return ret; |
---|
107 | } |
---|
108 | alert("TEST JQUERY new:\n\n" + $("#line").clone().html()); |
---|
109 | }); |
---|
110 | </script> |
---|
111 | </head> |
---|
112 | |
---|
113 | <body> |
---|
114 | <table> |
---|
115 | <tr id="line"> |
---|
116 | <td> |
---|
117 | <input name="a" type="text" id="input1" size="10"/> |
---|
118 | <input name="b" type="text" id="input2" size="10"> |
---|
119 | <input name="c" type="text" id="input3" size="10"> |
---|
120 | </td> |
---|
121 | </tr> |
---|
122 | </table> |
---|
123 | |
---|
124 | </body> |
---|
125 | </html> |
---|