javascript - 两次编辑本地存储项返回未定义

Question

我正在创建一个待办事项列表，一切似乎都很顺利。我能够创建、删除和编辑项目。但是，如果我尝试编辑一个项目两次 - 它返回未定义。

请看我的 fiddle :http://jsfiddle.net/willwebdesigner/786Qu/17/

// Edit a task
$(document).on("click", "#tasks li a.edit", function() {

    var thisID = $(this).parent().attr("id");

    $(this).parent().html("<form><input class='taskEdit" + thisID + "' value=''><input type='submit' value='Edit me'></form>")
    .submit(function() {
         localStorage.setItem(thisID, $(".taskEdit" + thisID ).val());
        $(this).html(localStorage.getItem(thisID) + menuButtons);
    });
});

Answer 1

表单正在提交，在值可以存储到本地存储之前重新加载页面，一旦页面重新加载并尝试从本地存储中获取该值，它是未定义的。

为什么每次在本地存储中存储一个值时都提交表单并重新加载页面？

并且提交函数绑定(bind)到 $(this).parent()，而不是包含“Edit me”按钮的表单。

$(document).on("click", "#tasks li a.edit", function () {
    var thisID = $(this).parent().attr("id"),
        form = $("<form><input class='taskEdit" + thisID + "' value=''><input type='submit' value='Edit me'></form>");

    $(this).parent().empty().append(form);
    form.on('submit', function (e) {
        e.preventDefault();
        localStorage.setItem(thisID, $(".taskEdit" + thisID).val());
        $(this).html(localStorage.getItem(thisID) + menuButtons);
    });
});

FIXED FIDDLE