HTML5本地存儲 - 多個removeItem問題

我在擺弄HTML5本地存儲（以前沒有太多的機會使用它），我想我會做一個小記錄器類的事情。HTML5本地存儲 - 多個removeItem問題

我有一個函數，它讀取本地存儲中的內容，並將它顯示在頁面上，它可以正常工作，直到您嘗試刪除多個條目。

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/，並嘗試通過單擊表格下面的加粗標頭在刪除某些項 - 第一次它工作正常，但之後，它不會在所有的工作。

奇怪的是，當你添加一個新音符時，該函數也會被調用，並且它會一遍又一遍地工作。

任何想法？

由於提前，

灰

來源

2013-10-09 Godge

由於要素進行動態重新渲染，你需要使用事件代表團

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

演示：Fiddle

來源

2013-10-09 15:56:11

謝謝阿倫，作品魅力:) 你知道任何有關事件代表團的優秀閱讀資源嗎？ – Godge

@Godge看看http://api.jquery.com/on/#direct-and-delegated-events –

任何「虛擬的jQuery指南」應該提及它... – Alnitak

除了阿倫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-09 16:08:01 Oliboy50

謝謝，我不知道你可以做它就是這樣！肯定看起來更清潔，我想這可能也更有效率？ – Godge

是的。 ;） - – Oliboy50

HTML5本地存儲 - 多個removeItem問題

回答

相關問題