Skip to content

Instantly share code, notes, and snippets.



Created Jul 12, 2011
What would you like to do?
IE7 .clone issue
<!DOCTYPE html>
<meta charset="utf-8">
<title>Test Case</title>
#notify {
border: 1px solid #318210;
padding: 5px;
background-color: #C0FAB4;
<a href="javascript:;" id="recheck">re-check</a>
<a href="javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'NS']&amp;&amp;F.documentElement.namespaceURI;E=E?F[i+'NS'](E,'script'):F[i]('script');E[r]('id',b);E[r]('src',I+g+T);E[r](b,u);(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);E=new%20Image;E[r]('src',I+L);})(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite.js','releases/lite/latest/skin/xp/sprite.png','','#startOpened');">Firebug Lite</a>
click <em>Add Note</em>; observe the notification box reporting the
expected values for the newly created <code>textarea</code>'s
<code>id</code> and <code>name</code> attributes
repeat the previous step three times
click <em>re-check</em> to check the values for the third note,
independent of the dynamic-creation process - note that the
notification box now reports the expected <code>id</code>, but the
<code>name</code> attribute uses an unexpected index; that of the
very last note element
repeat the first step
repeat the third step, observing the same erroneous behavior
activate <em>Firebug Lite</em> to inspect the DOM, confirming that
the <code>name</code> attribute of all <code>textarea</code>s is
<p id="notify"></p>
<form action="#" method="get">
<legend>My Notes</legend>
<textarea name="foo0bar" id="foo0bar"></textarea>
<input type="button" value="Add Note">
<script src=""></script>
(function($) {
var noteCount = $("fieldset li").length;
var debug = function(args) {
var msg =, " || ");
var addNote = function(ev) {
var container = $(this).closest("fieldset");
var template = $("ol li:last-child", container);
var id = "foo" + (noteCount - 1) + "bar";
var clone = template.clone(true, true);
clone.find("textarea").val("").attr("id", id).attr("name", id);
$("ol", container).append(clone);
var el = $("ol li:last-child textarea", container);
debug("#" + noteCount, el.attr("id"), el.attr("name"));
return false;
$(document).ready(function($) {
$("#recheck").click(function(ev) {
var el = $("ol li textarea").eq(2);
debug("3rd note", el.attr("id"), el.attr("name"));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.