Question

我正在创建一个待办事项清单，一切似乎都运作良好。我可以创建，删除和编辑项目。但是，如果我尝试两次编辑项目 - 它会返回一个未定义的项目。

请看我的小提琴：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

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

为什么每次将值存储在本地存储中时，您是否准确提交表单并重新加载页面？

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

$(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

Answer 2

由于新值存储在表单中并导致浏览器在删除项目时崩溃，因此我稍微修改了您的代码。

$(document).on("click", "#tasks li a.edit", function () {
    var thisID = $(this).parent().attr("id"),
        form = $("<form class='editForm'><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).parent().html(localStorage.getItem(thisID) + menuButtons);
        $(this).remove('.editForm');
    });
});

两次编辑本地存储项是返回未定义的

2 个答案: