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

Question

我试图用html5 localstorage和一些javscript/jquery做一个todo-list。我使用一个ul并存储它，这工作得很好，并且能够将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); 

} 
}); 

任何想法？

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