Некорректно обрабатывается событие на чекбоксе после выгрузки из localstorage

@Nykos · Регистрация: 28.09.2011

Студворк — интернет-сервис помощи студентам

Всем здравствуйте. Благодаря подсказке из своего прошлого вопроса научился при нажатии на checkbox удалять строку таблицы, в котором он находился. Но моя задача усложнилась - после каждой манипуляции я загружаю актуальную таблицу в localstorage. С этим все ОК. Далее я обновляю страницу и забираю из хранилища свою таблицу (ну чтобы данные не потерялись) - тут тоже все супер. Но событие на checkbox при этом теряется и я пытаюсь объявить его снова с помощью той же конструкции, которая успешно срабатывает при добавлении элементов таблицу. Вот этот кусочек:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
var ShoppingList = localStorage.getItem('ShoppingList'); //тут я получаю всю табличку
    if (ShoppingList !== null) {
        document.getElementById('myTable').innerHTML = ShoppingList;
    }
        var checkbox = document.getElementById('checkbox_id'); //тут я получаю конкретно чекбокс
    checkbox.addEventListener("click", function (elemCheck) { // ну а тут я вроде как должен присвоить ему событие
        var checkboxElement = elemCheck.target;
        var elCheck = checkboxElement.parentElement.parentElement;
        elCheck.parentElement.removeChild(elCheck);
        localStorage.setItem("ShoppingList", document.getElementById("myTable").innerHTML); // и кладу обратно в хранилище
    });

Но после F5 первая строка таблицы удаляется, а на остальных кликанье по чекбоксу ни к чему не приводит. Почему так происходит? В чем мой косяк? Уже совсем запутался. Подскажите пожалуйста. Более полный листинг прилагаю. Спасибо.

main.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
function insertRow(id) {
  var tbody = document.getElementById(id).getElementsByTagName("tbody")[0];
  var row;
  row = document.createElement("tr");
  row.setAttribute("id", "tr_id");
  var cellCounter = document.getElementById("myTable").rows.length;
 
  var td1 = document.createElement("td");
  td1.setAttribute("id", "td1_id");
  td1.appendChild(document.createTextNode(cellCounter));
 
  var td2 = document.createElement("td");
  td2.setAttribute("id", "td2_id");
  var checkbox = document.createElement("input");
  checkbox.setAttribute("type", "checkbox");
  checkbox.setAttribute("id", "checkbox_id");
  checkbox.addEventListener("click", function(elemCheck) {
    var checkboxElement = elemCheck.target;
    var elCheck = checkboxElement.parentElement.parentElement;
    elCheck.parentElement.removeChild(elCheck);
    localStorage.setItem("ShoppingList", document.getElementById("myTable").innerHTML);
  });
  td2.appendChild(checkbox);
 
  var td3 = document.createElement("td");
  td3.setAttribute("id", "td3_id");
  td3.appendChild(document.createTextNode(document.getElementById("add_id").value));
 
  var td4 = document.createElement("td");
  td4.setAttribute("id", "td4_id");
  td4.appendChild(document.createTextNode(document.getElementById("quant_id").value));
 
  var td5 = document.createElement("td");
  td5.setAttribute("id", "td5_id");
  td5.appendChild(document.createTextNode(document.getElementById("price_id").value));
 
  var td6 = document.createElement("td");
  td6.setAttribute("id", "td6_id");
  var btnEdit = document.createElement("input");
  btnEdit.setAttribute("class", "btnEdit");
  btnEdit.src = "icons/edit.png";
  btnEdit.type = "image";
  btnEdit.addEventListener('click', function() {
    editButton();
    return false;
  });
  td6.appendChild(btnEdit);
 
  var deleteButton = document.createElement("input");
  deleteButton.setAttribute("class", "deleteButton");
  deleteButton.src = "icons/delete.png";
  deleteButton.type = "image";
  deleteButton.addEventListener('click', function(elemDel) {
    var deleteElement = elemDel.target;
    var elDel = deleteElement.parentElement.parentElement;
    elDel.parentElement.removeChild(elDel);
    localStorage.setItem("ShoppingList", document.getElementById("myTable").innerHTML);
  });
  td6.appendChild(deleteButton);
  td6.setAttribute("colspan", "2");
  row.appendChild(td1);
  row.appendChild(td2);
  row.appendChild(td3);
  row.appendChild(td4);
  row.appendChild(td5);
  row.appendChild(td6);
  tbody.appendChild(row);
 
  localStorage.setItem("ShoppingList", document.getElementById("myTable").innerHTML);
}
 
function indexLS() {
  var ShoppingList = localStorage.getItem('ShoppingList');
  if (ShoppingList !== null) {
    document.getElementById('myTable').innerHTML = ShoppingList;
  }
  var checkbox = document.getElementById('checkbox_id');
  checkbox.addEventListener("click", function(elemCheck) {
    var checkboxElement = elemCheck.target;
    var elCheck = checkboxElement.parentElement.parentElement;
    elCheck.parentElement.removeChild(elCheck);
    localStorage.setItem("ShoppingList", document.getElementById("myTable").innerHTML);
  });
 
}

index.html

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <link href="css/style.css" rel="stylesheet">
  <title>Cart</title>
</head>
 
<body onload="indexLS();return false;" class="body">
  <div class="menu">
    <ul class="list">
      <li class="li_index"><a class="link_index" href="index.html">Shopping list</a></li>
      <li class="li"><a class="link" href="done.html">Done</a></li>
      <li class="li"><a class="link" href="deleted.html">Deleted</a></li>
    </ul>
  </div>
  <div class="main">
    <h1 class="h1">Shopping List</h1>
    <hr class="hr">
    <div class="inputs">
      <input class="input_add" type="text" id="add_id" placeholder="Add items to you Shopping List">
      <input class="input_quant" type="text" id="quant_id" placeholder="Quant.">
      <input class="input_price" type="text" id="price_id" placeholder="Price">
      <button class="input_button" type="button" onclick="insertRow('myTable');return false;">Add</button>
    </div>
  </div>
 
  <div class="table">
    <table class="mytable" id="myTable" cellspacing="0" border="1">
      <tbody id="tbody">
        <tr id="tr_id" class="tr">
          <td>#</td>
          <td>Done</td>
          <td>Item</td>
          <td>Quantity</td>
          <td>Price $</td>
          <td colspan="2" width="100">Action</td>
        </tr>
      </tbody>
    </table>
  </div>
 
</body>
<script src="js/main.js"></script>
 
</html>

@renat_dmitriev · 21.12.2017, 15:52

Косяк в том, что

JavaScript
1
var checkbox = document.getElementById('checkbox_id');

получает первый элемент с таким id, а у вас он в каждой строке.
Вообще по логике использования id этот идентификатор должен быть уникальным, посему вместо него используйте класс.
При добавлении строки вместо

JavaScript
1
checkbox.setAttribute("id", "checkbox_id");

устанавливайте класс, например

JavaScript
1
checkbox.className = 'deleteButton';

а при восстановлении из хранилища методом document.getElementsByClassName получайте все элементы с классом deleteButton и в цикле устанавливайте им событие.

Другой способ, более простой и естественный: прописывать вызов события в свойстве onclick самого элемента при создании

JavaScript
1
checkbox.setAttribute('onclick', 'deleteLine(event)');

и анонимную функцию удаления строки объявить отдельно с именем deleteLine

JavaScript
1
2
3
4
5
6
function deleteLine(elemCheck) {
    var checkboxElement = elemCheck.target;
    var elCheck = checkboxElement.parentElement.parentElement;
    elCheck.parentElement.removeChild(elCheck);
    localStorage.setItem("ShoppingList", document.getElementById("myTable").innerHTML);
}

В этом случае при восстановлении из хранилища делать ничего дополнительно не надо, так как атрибут onclick хранится в самом элементе.

PS И конструкции вроде

JavaScript
1
document.getElementById("myTable").innerHTML)

абсолютно бессмысленны, так как если id соответствует правилу идентификаторов, то к нему можно обращаться по этому самому id, то есть

JavaScript
1
myTable.innerHTML

@Nykos · 21.12.2017, 16:17 **[ТС]**

Спасибо большое! Ваши советы помогли решить мою проблему.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Nykos 1 / 1 / 0 Регистрация: 28.09.2011 Сообщений: 28
	21.12.2017, 16:17 [ТС]
	Спасибо большое! Ваши советы помогли решить мою проблему. 0