| 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> |
|---|
