Некорректно обрабатывается событие на чекбоксе после выгрузки из localstorage
Всем здравствуйте. Благодаря подсказке из своего прошлого вопроса научился при нажатии на checkbox удалять строку таблицы, в котором он находился. Но моя задача усложнилась - после каждой манипуляции я загружаю актуальную таблицу в localstorage. С этим все ОК. Далее я обновляю страницу и забираю из хранилища свою таблицу (ну чтобы данные не потерялись) - тут тоже все супер. Но событие на checkbox при этом теряется и я пытаюсь объявить его снова с помощью той же конструкции, которая успешно срабатывает при добавлении элементов таблицу. Вот этот кусочек:
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 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 <!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> |
Часовой пояс GMT +3, время: 05:33. |