从 localStorage 加载 HTML 会破坏按钮的功能

Question

我将部分 HTML (div class="savage") 保存在 localStorage 中，并在页面刷新时检索它。有问题的 HTML 是一个文本框，用于输入和“添加新项目”按钮，以及一个带有“删除”按钮和复选框的项目的无序列表。在我向列表中添加一些项目并刷新页面后，列表会正确加载，但我不能再使用添加按钮了。我可以单击它，但没有任何反应，它不会将新项目附加到列表中。如果有人能告诉我我做错了什么或指出我正确的方向，将不胜感激。

HTML

<div class="savage">
   <h1>List of exercises to do today </h1>
   <h2> My workout <span id="counter"></span></h2>
       <form><input type="text" id="new-text"/></form><button id="add">Add</button>
           <ul id="mylist">
              <li> <input type="checkbox" class="done"/>figs<button    class="delete">delete</button></li>
              <li><input type="checkbox" class="done"/>pine nuts<button  class="delete">delete</button></li>
           </ul>
</div>

还有JQUERY

window.onload = function() {
    if(localStorage.getItem('peterslist')) {
    $('.savage').html(localStorage.getItem('peterslist'));
}
};

function updateStorage() {
    var peterslist = $('.savage').html();
    localStorage.setItem('peterslist', peterslist);
}

按钮事件处理程序

$(function(){

  $("#add").on('click', addListItem);
  $(document).on('click', '.delete', deleteitem);
  $(document).on('click', '.done', finishItem);

});

Answer 1

#add 位于 .savage 内部，因此已更改，因此链接到 #add 的处理程序将丢失。结果如下代码

$(function(){

  $("#add").on('click', addListItem);
  $(document).on('click', '.delete', deleteitem);
  $(document).on('click', '.done', finishItem);

});

应该改成这个

$(function(){

  $(".savage").parent().on('click', "#add", addListItem);
  $(document).on('click', '.delete', deleteitem);
  $(document).on('click', '.done', finishItem);

});

Answer 2

您正在更改 div.savage 的 html 内容，并因此修改 DOM。如果您的按钮附加了事件，那么这些处理程序可能已经过时（使用旧的 DOM 节点）。每次更新 div.savage 的内容时，都应该重新添加按钮回调：

window.onload = function() {
  if(localStorage.getItem('peterslist')) {
    // Changing the html will remove the old nodes, and, therefore, ignore old event handlers (click).
    $('.savage').html(localStorage.getItem('peterslist'));

    // Load again the `.click()` events here, after loading the html
    $("#add").on('click', addListItem);
    $(document).on('click', '.delete', deleteitem);
    $(document).on('click', '.done', finishItem);
  }
};