Изменение имени атрибута клонированного элемента ввода в jQuery не работает в IE6 / 7
ЭтотSSCCE говорит все это:
<!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>
Скопируйте и запустите его, нажмитеAdd кнопку несколько раз. На каждом клике вы должны увидеть HTML-код<ul> чтобы показать в<pre id="showsource"> и ожидаемый код должен быть примерно:
<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>
Это работает, как и ожидалось, в FF, Chrome, Safari, Opera и IE8.
Однако IE6 / 7 не удается изменитьname атрибут и производит как:
<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 немного и нашелэто очень похожая проблема, он исправил это и отправил фрагмент кода, как это должно выглядеть. К сожалению, это именно то, что я уже сделал, поэтому я подозреваю, что он тестировал только в IE8, а не в IE6 / 7. За исключением этой конкретной темы, Google мало что показал.
Есть идеи? Или я действительно должен вернутьсяdocument.createElement?
Примечание: я знаю, что могу использовать одно и то же имя для каждого элемента ввода и извлекать их в виде массива, но приведенный выше пример является лишь базовым примером, в действительности мне действительно нужно изменить атрибут имени, поскольку он не только содержит индекс, но также и другая информация, такая как parentindex, порядок и т. д. Он используется для добавления / перестановки / удаления (под) пунктов меню.
Редактировать: это связано сэта ошибка, JQuery (я использую 1.3.2), таким образом, кажется, не создает входные данные таким образом? Следующее действительно работает:
$('#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());
});
Но я не могу себе представить, что я единственный, кто столкнулся с этой проблемой с jQuery. Даже простой$('<input>').attr('name', 'foo') не работает в IE6 / 7. Разве jQuery не является кроссбраузерной библиотекой, предназначенной для решения этой конкретной проблемы?