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 に答える