Zmiana nazwy sklonowanego elementu wejściowego w jQuery nie działa w IE6 / 7
ToSSCCE mówi wszystko:
<!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 to, kliknijAdd przycisk kilka razy. Przy każdym kliknięciu powinieneś zobaczyć kod HTML<ul> pokazać się w<pre id="showsource"> a oczekiwany kod powinien być z grubsza:
<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>
Działa to zgodnie z oczekiwaniami w FF, Chrome, Safari, Opera i IE8.
Jednak IE6 / 7 nie może zmienićname atrybut i produkuje jak:
<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 googled trochę i znalazłemten bardzo podobny problem, naprawił go i opublikował fragment kodu, jak powinien wyglądać. Niestety jest to dokładnie to, co już zrobiłem, więc podejrzewam, że testował tylko w IE8, a nie w IE6 / 7. Poza tym konkretnym tematem Google nie ujawnił wiele.
Jakieś spostrzeżenia? Czy naprawdę muszę się wycofaćdocument.createElement?
Uwaga: Wiem, że mogę użyć tej samej nazwy dla każdego elementu wejściowego i pobrać je jako tablicę, ale powyższe jest tylko podstawowym przykładem, w rzeczywistości naprawdę muszę zmienić atrybut nazwy, ponieważ zawiera on nie tylko indeks, ale także inne informacje, takie jak parentindex, kolejność itd. Służy do dodawania / zmiany kolejności / usuwania (pod) pozycji menu.
Edytować: jest to związane zten błąd, JQuery (używam 1.3.2) nie wydaje się zatem tworzyć wejść w ten sposób? Poniższe czynności po prostu działają:
$('#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());
});
Ale nie wyobrażam sobie, że jestem jedynym, który napotkał ten problem z jQuery. Nawet prosty$('<input>').attr('name', 'foo') nie działa w IE6 / 7. Czy jQuery nie jest biblioteką crossbrowser, która ma obejmować ten konkretny problem pod maskami?