javascript - HTML5本地存储-多个removeItem问题

我在摆弄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/并尝试通过单击表单下方的粗体标题来删除一些条目-第一次可以正常使用，但之后完全不起作用。

奇怪的是，当您添加新笔记时也会调用该函数，并且它会一遍又一遍地工作。

有任何想法吗？

提前致谢，

灰

最佳答案

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

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

演示：Fiddle

关于javascript - HTML5本地存储-多个removeItem问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19276841/