Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.05.2018, 22:00
Аватар для void()
Профессор
Отправить личное сообщение для void() Посмотреть профиль Найти все сообщения от void()
 
Регистрация: 11.08.2017
Сообщений: 208

Слетает чекбокс при добавлении элемента в DOM
Всем привет!

Помогите. Такой бред случился...

В этом примере кнопка добавляет новые элементы в список.

Если перед добавлением нового элемента снять галочку с уже существующего чекбокса или наоборот - поставить, то этот выбор слетает после добавления нового элемента.

Как это можно вылечить?


<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Пример</title>
</head>
<body>
	<button class="btn">Добавить элемент</button>

	<ul class="myUl">
		<li>
			<input type="checkbox" class="checkbox" checked>
			<span class="msg"> text </span>
		</li>
		<li>
			<input type="checkbox" class="checkbox" >
			<span class="msg"> text </span>
		</li>
	</ul>

	<script>
		var ul = document.querySelector('.myUl');
		var add = document.querySelector('.btn');

		add.addEventListener("click", fun);

		function fun(){
			ul.innerHTML += '<li><input type="checkbox" class="checkbox" ><span class="msg"> text </span></li>';
		}

	</script>
</body>
</html>

Последний раз редактировалось void(), 10.05.2018 в 22:02.
Ответить с цитированием
  #2 (permalink)  
Старый 10.05.2018, 22:04
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,584

ul.innerHTML += x - это шорткат к ul.innerHTML = ul.innerHTML + x;
Естественно содержимое переписывается полностью.

Используйте dom методы: document.createElement, element.appendChild итд.
__________________
29375, 35
Ответить с цитированием
  #3 (permalink)  
Старый 10.05.2018, 22:14
Аватар для void()
Профессор
Отправить личное сообщение для void() Посмотреть профиль Найти все сообщения от void()
 
Регистрация: 11.08.2017
Сообщений: 208

Aetae,
Хм, не знал... Значит придется все переделать. Спасибо за информацию)
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
focusout приходит при активациия элемента (type=number) ValeryBush Firefox/Mozilla 0 17.07.2015 14:43
Как пометить чекбокс при нажатии на кнопку? vasyakrn Элементы интерфейса 5 03.04.2015 12:10
Как сохранить обработчики элемента, при изменения положения элемента в dom-дереве ? Danxil Events/DOM/Window 5 08.11.2013 23:33
Скролл окна при добавлении контента "сверху"" yaneblog Events/DOM/Window 0 22.01.2010 23:00
удаление DOM элемента и перезагрузка страницы Andrey2005 Общие вопросы Javascript 3 12.10.2009 23:49