0

我正在尝试使用 html5 localstorage 和一些 JavaScript/jQuery 做一个待办事项列表。我使用 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
 }
}

颜色（）函数：

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

问题是您刚刚添加的新项目没有附加用于删除的单击处理程序。

您有两种选择来处理此问题，一种是使用.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"]'))
于 2012-05-13T13:52:06.773 回答