Question

我正在摆弄HTML5本地存储（以前没有太多机会玩它）我认为我会做一些记笔记的事情。

我有一个函数可以读取本地存储中的内容并将其显示在页面上，这样可以正常工作，直到您尝试删除多个条目。

function renderNotes() {
    $(currentNotes).html('');
    Object.keys(localStorage);
    Object.keys(localStorage).length;
    $.each(localStorage, function(key, value){
        $(currentNotes).append('<div class="note"><div class="noteHeader"><p class="noteName">' + key + '</p></div><div class="noteContent"><p>' + value + '</p></div></div>');
    });
    alert('notes rendered');
}

转到JSFiddle：http://jsfiddle.net/AThomas92/MSxQ9/3/并尝试通过单击表单下方的粗体标题来删除一些条目 - 第一次它正常工作，但之后它根本不起作用。

奇怪的是，当你添加一个新音符时，也会调用该函数，它会一遍又一遍地工作。

有什么想法吗？

提前致谢，

灰

Answer 1

由于元素是动态重新呈现的，因此您需要使用事件委派

// DELETE NOTE
$(document).on('click', '.noteName', function(){
    var noteName = $(this).html();
    localStorage.removeItem(noteName);
    renderNotes();
});

演示：Fiddle

Answer 2

除了Arun P Johny的回答，这里有一个提示你使用jquery：

而不是使用如下的jquery对象：

  var saveBtn = $('#saveBtn');

  $(saveBtn).click(function(){
    // Code
  });

使用它：

  var saveBtn = $('#saveBtn');

  saveBtn.click(function(){
    // Code
  });

甚至更好（记住它是一个jquery对象）：

  var $saveBtn = $('#saveBtn');

  $saveBtn.click(function(){
    // Code
  });

HTML5本地存储 - 多个removeItem问题

2 个答案: