1

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

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

2 回答 2

2

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

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

并且提交功能绑定到$(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);
    });
});

固定小提琴

于 2013-03-26T09:01:12.000 回答
0

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

$(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');
    });
});
于 2013-03-26T09:44:25.523 回答