Question

我正在尝试制作日历Web应用程序，并希望使用localstorage保存用户状态。我尝试使用两种方法（innerHTML以及JavaScript DOM-to-JSON； https://github.com/azaslavsky/domJSON），但是每种方法都会删除按钮的onclick事件。

我认为问题在于它仅对innerhtml进行了字符串化，出于某种原因，该列表没有列出我的onlick事件（尽管会触发onlick事件）。我应该怎么做，以便用户可以重新加载页面并仍然使用按钮。

以下是显示按钮停止工作的示例（删除缓存和网站cookie /数据以使按钮再次工作）： https://codepen.io/samuel-solomon/pen/XWdzKjd?editors=1011

window.pageState;

$(document).ready(function(){
  let div = document.getElementById("div")
  
  window.pageState = JSON.parse(localStorage.getItem('pageState'));
  if (window.pageState === null) {
    let btn = document.createElement('button')
    btn.innerText = "Hello";
    btn.style = "height: 100px";
    btn.onclick = function (btn) {change_text(btn)}.bind(null, btn);
    div.appendChild(btn);
    window.pageState = {state: div.innerHTML};
  }
  else {div.innerHTML = window.pageState.state}
});

function change_text(btn) {
  let div = document.getElementById("div");
  if (btn.innerText === "Hello") {btn.innerText = "Goodbye";}
  else if (btn.innerText === "Goodbye") {btn.innerText = "Hello";}
  localStorage.setItem('pageState', JSON.stringify(window.pageState));
}

这是我的问题所在的地方（例如：双击“ Ae 101A”，然后在压光机中双击它。它应该消失。现在再次添加并重新加载页面。现在双击时它不会消失）： https://turtle-pond.com/

Answer 1

似乎您正在使用jQuery。为了将事件挂接到动态创建的元素上，我建议使用选择器过滤方法：与其将click事件绑定到按钮元素本身上，不如将其绑定在父容器（甚至文档）上，并通过按钮的选择器进行过滤。方法如下：

window.pageState;

$(document).ready(function(){
  let div = document.getElementById("div")

  $(document).on('click', "#my-button", function (event) {
    const btn = event.target; // or btn = document.getElementById("my-button");
    change_text(btn);
  }); 
  
  window.pageState = JSON.parse(localStorage.getItem('pageState'));
  if (window.pageState === null) {
    let btn = document.createElement('button')
    btn.innerText = "Hello";
    btn.style = "height: 100px";
    btn.id = "my-button";
    div.appendChild(btn);
    window.pageState = {state: div.innerHTML};
  }
  else {div.innerHTML = window.pageState.state}
});

function change_text(btn) {
  let div = document.getElementById("div");
  if (btn.innerText === "Hello") {btn.innerText = "Goodbye";}
  else if (btn.innerText === "Goodbye") {btn.innerText = "Hello";}
  localStorage.setItem('pageState', JSON.stringify(window.pageState));
}

详细了解此on jQuery documentation和here。

LocalStorage不保存onclick属性

1 个答案: