Jquery 从localStorage加载HTML会中断按钮的功能

我将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>

按钮事件处理程序

$(function(){

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

});

---

您正在更改

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

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

});

---

你能给我们看一下你的按钮事件处理程序吗？添加了事件处理程序。这是次优的。第二个和第三个单击事件处理程序不会消失，因为它们链接到document.on（），而第一个是问题所在。它可以链接到的父母。萨维奇，看看我的答案。非常感谢！更改事件处理程序修复了我的问题！后续问题：您能详细说明一下在这种特殊情况下parent（）的用法吗？是不是要遍历一位家长，然后开始搜索“从那里添加”？Max，你几乎完全理解这个想法。基本上，我们正在搜索第一个包含savage的固体标记。这是它的父母。正确地使用了.on（），它适用于与#add条件匹配的当前和未来元素。因此，在调用on（）时，它正在搜索#add，但也将应用于#add的未来实例。如果我的答案解决了你的问题，你可以考虑通过点击复选标记来接受它。@ LajosArpad谢谢你的解释。很抱歉，我试着提升它，但它不让我，因为我是新来的。我接受了你的解决方案@麦克斯，我很乐意帮忙。

$(function(){

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

});