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问题

回答

相关问题