HTML5本地存儲-多個removeItem問題

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();
});

演示： 小提琴

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
  });