Question

我试图用html5 localstorage和一些javscript / jquery做一个todo-list。我使用ul并存储它，它工作正常并且能够添加li并且当我重新加载页面时它们会停留。但是当我尝试执行删除功能时，我遇到了一些问题.. 下面的代码可以在我重新加载页面后删除li's 。但我不能删除刚刚添加的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);

}
});

有什么想法吗？

Answer 1

问题是您刚添加的新项目没有附加点击处理程序以进行删除。

您有两种方法可以解决此问题，一种方法是使用.live代替.click（http://api.jquery.com/live/）。另一种方法是将删除代码包装在一个函数中，并在添加一个新项后调用该函数。

第一个选项看起来像这样（未经测试）：

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

第二个选项看起来像

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"]'))

只能在页面重新加载时删除

1 个答案: