0

html5 localstorage といくつかの JavaScript/jQuery を使用して todo リストを実行しようとしています。私は ul を使用して保存します。これは正常に機能し、li を追加することができ、ページをリロードしても保持されます。しかし、削除機能を実行しようとすると、いくつかの問題が発生しました..以下のコードは、ページをリロードした後にliを削除するように機能します。しかし、追加したばかりの li を削除することはできません。

アイテムを追加するときは、次のようにします。

$(add).click(function(e) {
 if (addtext.value != ""){
  $(listan).append("<li>" + addtext.value + "</li>"); //listan is my <ul>
  localStorage.setItem('todo', listan.innerHTML);
  addtext.value = "";
  color(); //this adds some color to the li and also adds a delete-button
 }
}

color() 関数:

function color(){
   lin = document.getElementsByTagName('li');

   for (var i = 0; i < lin.length;i++) {
     if (!(lin[i].childNodes.length > 1)){
       $(lin[i]).append("<input type='button' value='ta bort' class='tabort'></intput>"); //adds a deletebutton to all li's that doesnt have one
  
}}}

アイテムを削除するときは、次のようにします。

$('input[type="button"]').click(function() {
if (this.id != 'clear'){
  $(this).parent().remove();
  color();
  localStorage.setItem('todo', listan.innerHTML);
  
}
});

何か案は？

4

1 に答える 1

1

問題は、追加したばかりの新しい項目に、削除用のクリック ハンドラーが添付されていないことです。

これを処理するには 2 つのオプションがあります。1 つは(http://api.jquery.com/live/).liveの代わりに使用することです。.clickもう 1 つは、関数で削除コードをラップし、新しいアイテムを追加した後にその関数を呼び出すことです。

最初のオプションは次のようになります (未テスト):

$('input[type="button"]').live('click', function() {
    if (this.id != 'clear'){
      $(this).parent().remove();
      color();
      localStorage.setItem('todo', listan.innerHTML);
    }
});

そして、2番目のオプションは次のようになります

addDeleteHandler = function($item) {
  $item.click(function() {
    if (this.id != 'clear'){
      $(this).parent().remove();
      color();
      localStorage.setItem('todo', listan.innerHTML);
    }
  });
}

// Modify the add handler
$(add).click(function(e) {
  if (addtext.value != ""){
    $newItem = $("<li>" + addtext.value + "</li>")
    $(listan).append($newItem); //listan is my <ul>
    addDeleteHandler($newItem); // Add delete handler
    localStorage.setItem('todo', listan.innerHTML);
    addtext.value = "";
    color(); //this adds some color to the li and also adds a delete-button
  }
}

// Need this to add delete handlers for items that are already in the list when page loads
addDeleteHandler($('input[type="button"]'))
于 2012-05-13T13:52:06.773 に答える