Question

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

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);
}

BUTTON EVAND HANDLER

$(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);
  }
};

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

2 个答案: