insertBefore не всегда срабатывает.
Вот пример:
<html><head>
<script type="text/javascript"><!--
function addItem(parname) {
var list = document.getElementById(parname);
var ul = list.parentNode;
var newItem = list.cloneNode(1);
newItem.setAttribute('id', 'NewId');
if (list.nextSibling.nodeType == 3) {
var nextli = list.nextSibling.nextSibling;
} else {
var nextli = list.nextSibling;
}
ul.insertBefore(newItem, nextli);
}
//--></script>
</head><body>
<ul id="prices">
<li id="kot1">
<label for="price">Primer</label>
<input type="text" class="cat" name="price" id="price" value="0.00" onChange="checkPrice(this.id)" />
<input type="button" class="addline" value=" + " onClick="addItem(this.parentNode.id);" />
</li>
</ul>
</body></html>
Все вроде работает, но проявился интересный казус: 1 шаг: Нажимаю на кнопку добавления строки, добавляется вторая строка. 2 шаг: Нажимаю на кнопку добавления у этой второй строки, ничего не происходит (???) . 3 шаг: Нажимаю на кнопку добавления у первой строки, добавляется третья строка. теперь можно нажимать на любую из кнопок добавления строки, все будет работать. Вопрос: что происходит на втором шаге, почему не срабатывает? |
Rig,
Потому что нет никакого list.nextSibling после вставленного клона , снова клонируем по первой кнопке - это узел kot1 -- после него есть узел id = 'NewId' -- теперь у нас узлы по порядку kot1 ,'NewId','NewId' -потом третья кнопка клонирования срабатывает потому что ищеться первый id = 'NewId' а после него уже есть узел , то есть мы на самом деле всегда клонируем второй узел на какую бы кнопку после первой ненажимали еслибы id было уникальным то последний клон никогда бы не смог себя клонировать потому что он последний и после него нет никаких больше узлов. чтоб было ещё понятнее уберите перевод строки между 22</li> 23</ul> сделайте так 22</li></ul> и ваш скрипт никогда не сработает с самого начала -- меняйте алгорит скрипта -- проверка на list.nextSibling явно лишняя... да и id у всех элементов должно быть уникальным. Возможный вариант ... у input только по прежнему не уникальные id ... добавьте сами по примеру ниже
<html><head>
<script type="text/javascript">
var n = 1;
function addItem(node) {
var list = node;
var ul = list.parentNode;
var newItem = list.cloneNode(1);
newItem.id = 'NewId'+n++;
ul.insertBefore(newItem, ul.lastChild);
}
</script>
</head><body>
<ul id="prices">
<li id="kot1">
<label for="price">Primer</label>
<input type="text" class="cat" name="price" id="price" value="0.00" onChange="checkPrice(this.id)" />
<input type="button" class="addline" value=" + " onClick="addItem(this.parentNode);" />
</li>
</ul>
</body></html>
|
рони,
Благодарю Вас за такое обширное разъяснение да ещё и с примером... Теперь все стало ясно и понятно, спасибо большое! |
| Часовой пояс GMT +3, время: 19:57. |