Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.12.2011, 23:14
Rig Rig вне форума
Интересующийся
Отправить личное сообщение для Rig Посмотреть профиль Найти все сообщения от Rig
 
Регистрация: 21.12.2011
Сообщений: 10

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, 24.12.2011 в 23:17.
Ответить с цитированием
  #2 (permalink)  
Старый 25.12.2011, 07:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,052

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>
Ответить с цитированием
  #3 (permalink)  
Старый 25.12.2011, 17:33
Rig Rig вне форума
Интересующийся
Отправить личное сообщение для Rig Посмотреть профиль Найти все сообщения от Rig
 
Регистрация: 21.12.2011
Сообщений: 10

рони,
Благодарю Вас за такое обширное разъяснение да ещё и с примером... Теперь все стало ясно и понятно, спасибо большое!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не срабатывает обработчик window.onload. Alex82 Events/DOM/Window 16 22.02.2013 20:06
Не всегда срабатывает onclick Almiur Events/DOM/Window 7 25.11.2011 10:39
Обработчик click вызывается несколько раз или не всегда вызывается OlegJquery jQuery 2 21.07.2011 20:37
Jquery live не всегда срабатывает JIEXA jQuery 5 25.10.2010 18:50
Не срабатывает при отсутствии в теле документа yuriii jQuery 3 06.05.2010 17:45