은 페이지가 다시로드 될 때만 삭제할 수 있습니다

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

방금 ​​추가 한 새 항목에 삭제 용 첨부 된 클릭 핸들러가없는 것이 문제입니다.

두 가지 방법으로 처리 할 수 ​​있습니다. 하나는 .click (http://api.jquery.com/live/) 대신 .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.7에서 더 이상 사용되지되고