1

私はやることリストを作成していますが、すべてがうまく機能しているようです。アイテムの作成、削除、編集ができます。ただし、アイテムを2回編集しようとすると、未定義が返されます。

私のフィドルをご覧ください：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 に答える