I am trying to clone a div and change the names of the input fields in this div.
It works great for most of the browsers but IE 7 does not change the name attribute of the input fields.
Demo: http://jsbin.com/iduro/7
HTML
<body>
<pre></pre>
<div><input value="Hello World" name="test"></div>
</body>
JS
var lastRow = $("body div:last"),
newRow = lastRow.clone(true)
.show()
.insertAfter(lastRow);
newRow.find('input').attr("name","test2");
$("pre").text( newRow[0].innerHTML );
Results:
Firefox: (works)
<input value="Hello World" name="test2">
IE8 (works)
<INPUT value="Hello World" name=test2 jQuery1273063250500="4">
IE7 (bug):
<INPUT value="Hello World" name=test jQuery1273063303968="4">
As you see the name of IE7 does not change to test2.
Is there any obvious reason or work around?
Best Answer
I could fix it for now. As long as an input field is not attached to the dom you can change the name and the radio buttons work properly again.
To lower the execution time only the jQuery Events, the className and the type attribute are copied.
fixCloneBug Method:
Maybe you think
$newElem.attr('name', this.name );
is useless however it allows me to use a jQuery 1.4 feature:.fixCloneBug (function(i,oldname){ return oldname+"_new" })