javascript - 编辑后在 jquery mobile 中重新加载页面

Question

您好，我已经使用phonegap完成了一个Android应用程序，现在我正在尝试更改Web应用程序的代码(该应用程序只是一个笔记保存)，但是在编辑后更改页面时遇到问题注释应用程序返回到索引页面，当您单击注释查看单个注释时，应用程序会再次返回索引页面(这种情况发生一次，如果您再次单击，工作正常)

演示 notesapp

这是js代码的一部分

 editNote: function(e){
        var noteId = $("#id-note").attr("value");
        var newText = $.trim($("#textarea-edit").val());
        var storage = window.localStorage.getItem("notes");
        storage = JSON.parse(storage);
        var newStorage = [];


        for( obj in storage ){
            if(noteId == storage[obj].id){
                newStorage.push({
                    id: storage[obj].id,
                    text: newText,
                    created: storage[obj].created 
                });
            }else{
                newStorage.push(storage[obj])
            }
        }

        window.localStorage.setItem("notes", JSON.stringify(newStorage));
        notes.showNotes();
        $.mobile.changePage($('#index'));


    }

$(document).bind("pagebeforechange", function(e, data){
    var u = $.mobile.path.parseUrl( data.toPage )
    if(u.hash){
        var page = u.hash.split("?")[0],
            idNote = u.hash.split("=")[1],
            storage = window.localStorage.getItem("notes"),
            singleText
        ;

        storage = JSON.parse(storage);

        // GET CURRENT NOTE TEXT
        for( obj in storage ){
            if(idNote == storage[obj].id){
                singleText = storage[obj].text;
            }
        }

        // SET ID-NOTE TO A INPUT HIDE FOR LATER RETRIEVE
        $("#id-note").attr("value", idNote)

        if(page == "#single"){ 
            if(idNote){
                console.log("show single page")  

                $("#single-note").html(singleText);
                $("#editnote-button").attr("href","#editnote?id=" + idNote);
            }
        }else if(page == "#editnote"){
            console.log("Show edit")

            $("#textarea-edit").val(singleText);
        }

    }


  });

Answer 1

您的问题在于每当启动页面pageinit时执行notes.init()。根据您的代码，notes.init() 向下面的按钮添加了多个 click 监听器。

$("#save-note").on("click", notes.saveNote);
$("#delete-note").on("click", notes.deleteNote);
$("#edit-note-button").on("click", notes.editNote);

要解决此问题，请将 pageinit 绑定(bind)到 #index 页面。这样 notes.init() 将仅运行一次。或者删除旧的click绑定(bind)并将其重新绑定(bind)到相同的按钮。

$("#save-note").off("click").on("click", notes.saveNote);
$("#delete-note").off("click").on("click", notes.deleteNote);
$("#edit-note-button").off("click").on("click", notes.editNote);

或者只运行一次pageinit。

$(document).one("pageinit", function () {
  notes.init();
});