Das Ändern der Namensattr des geklonten Eingabeelements in jQuery funktioniert in IE6 / 7 nicht
DieseSSCCE das sagt alles:
<!doctype html>
<html lang="en">
<head>
<title>Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#add').click(function() {
var ul = $('#ul');
var liclone = ul.find('li:last').clone(true);
var input = liclone.find('input');
input.attr('name', input.attr('name').replace(/(foo\[)(\d+)(\])/, function(f, p1, p2, p3) {
return p1 + (parseInt(p2) + 1) + p3;
}));
liclone.appendTo(ul);
$('#showsource').text(ul.html());
});
});
</script>
</head>
<body>
<ul id="ul">
<li><input type="text" name="foo[0]"></li>
</ul>
<button id="add">Add</button>
<pre id="showsource"></pre>
</body>
</html>
Copy'n'paste'n'run it, klicke auf denAdd mehrmals drücken. Bei jedem Klick solltest du den HTML-Code des sehen<ul> in der zeigen<pre id="showsource"> und der erwartete Code sollte ungefähr sein:
<li><input name="foo[0]" type="text"></li>
<li><input name="foo[1]" type="text"></li>
<li><input name="foo[2]" type="text"></li>
<li><input name="foo[3]" type="text"></li>
Dies funktioniert wie erwartet in FF, Chrome, Safari, Opera und IE8.
IE6 / 7 schlägt jedoch fehl, das zu ändernname Attribut und produziert wie:
<li><input name="foo[0]" type="text">
<li><input name="foo[0]" type="text">
<li><input name="foo[0]" type="text">
<li><input name="foo[0]" type="text"></li>
I gegoogelt ein bisschen und gefundenDieses sehr ähnliche Problem, er reparierte es und postete ein Code-Snippet, wie es aussehen sollte. Leider ist das genau das, was ich bereits getan habe, und ich vermute, dass er nur in IE8 getestet hat, nicht in IE6 / 7. Abgesehen von diesem speziellen Thema hat Google nicht viel verraten.
Irgendwelche Einsichten? Oder muss ich wirklich zurückgreifendocument.createElement?
Hinweis: Ich weiß, dass ich für jedes Eingabeelement nur den gleichen Namen verwenden und sie als Array abrufen kann. Das obige Beispiel ist jedoch nur ein einfaches Beispiel. In Wirklichkeit muss das name-Attribut unbedingt geändert werden, da es nicht nur das enthält index, aber auch andere Informationen wie parentindex, ordering usw. Es wurde verwendet, um (Unter-) Menüelemente hinzuzufügen / neu anzuordnen / zu entfernen.
Bearbeiten: das ist verwandt mitdieser Bug, Die jQuery (ich benutze 1.3.2) scheint also keine Eingaben auf diese Weise zu erzeugen? Folgendes funktioniert einfach:
$('#add').click(function() {
var ul = $('#ul');
var liclone = ul.find('li:last').clone(true);
var oldinput = liclone.find('input');
var name = oldinput.attr('name').replace(/(foo\[)(\d+)(\])/, function(f, p1, p2, p3) {
return p1 + (parseInt(p2) + 1) + p3;
});
var newinput = $('<input name="' + name + '">');
oldinput.replaceWith(newinput);
liclone.appendTo(ul);
$('#showsource').text(ul.html());
});
Aber ich kann mir nicht vorstellen, dass ich der einzige bin, der mit jQuery auf dieses Problem gestoßen ist. Sogar eine einfache$('<input>').attr('name', 'foo') funktioniert nicht in IE6 / 7. Ist jQuery nicht eine Crossbrowser-Bibliothek, die dieses spezielle Problem unter Verschluss halten soll?