0

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

奇怪的是，当你添加一个新的笔记时，这个函数也会被调用，而且它会一遍又一遍地工作。

有任何想法吗？

提前致谢，

灰

4

2 回答 2

3

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

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

演示：小提琴

于 2013-10-09T15:56:11.927 回答
1

除了 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
  });
于 2013-10-09T16:08:01.567 回答