Этот 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>
Скопируйте'paste'n'run, нажмите кнопку 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 немного искал и нашел эту очень похожую проблему, он исправил его и опубликовал фрагмент кода, как он должен выглядеть. К сожалению, это именно то, что я уже сделал, поэтому я подозреваю, что он тестировал только в 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 не является библиотекой crossbrowser, которая должна охватывать эту конкретную проблему под капотами?
