从localStorage加载HTML会打破按钮的功能 [英] Loading HTML from localStorage breaks function of a button

问题描述

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

 < div class =savage> 
< h1>今天要做的练习列表< / h1> 
< h2>我的锻炼< span id =counter>< / span>< / h2> 
< form>< input type =textid =new-text/>< / form>< button id =add> Add< / button> 
< ul id =mylist> 
< li> < input type =checkboxclass =done/> figs< button class =delete> delete< / button>< / li> 
< li>< input type =checkboxclass =done/>松仁< button class =delete>删除< / button>< / li> 
< / ul> 
< / div> 
  

和 JQUERY

  window.onload = function（）{
 if（localStorage.getItem（'peterslist'））{
 $（'。savage'）。html localStorage.getItem（ 'peterslist'））; 
} 
}; 
 
函数updateStorage（）{
 var peterslist = $（'。savage'）。html（）; 
 localStorage.setItem（'peterslist'，peterslist）; 
} 
  

按钮事件处理程序

$ b $（$'$ p
$ $ $ $ $ $ $ $ $ $ $'$ $ $ $ $ $'$'$'$'
$（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）; 
 
}）; 
  

应改为这个



<$ p $ （'click'，#add，addListItem）; $ b（$。$）$（$。$ sa $） （单击'，'.delete'，deleteitem）; $ b $ $ b}）;


I save a part of my HTML (div class="savage") in localStorage and retrieve it when the page is refreshed. The HTML in question is a text-box for input with and "add new item" button and an unordered list of items with "delete" buttons and checkboxes. After I add a few items to my list and refresh the page, the list gets loaded correctly but I can't use the add button anymore. I can click on it but nothing happens and it won't append new items to the list. If anyone can tell me what I did wrong or point me in the right direction it would be greatly appreciated.

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>

And JQUERY

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

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

BUTTON EVENT HANDLER

$(function(){

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

});

解决方案

The #add is inside .savage which is changed therefore the handler linked to #add will be lost. As a result the following code

$(function(){

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

});

should be changed to this

$(function(){

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

});

这篇关于从localStorage加载HTML会打破按钮的功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！