编辑后在jquery mobile中重新加载页面答案

【问题标题】：Realod page in jquery mobile after editing编辑后在jquery mobile中重新加载页面
【发布时间】：2014-01-03 15:40:53
【问题描述】：

您好，我已经使用 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);
        }

    }


  });

【问题讨论】：

我猜问题出在notes.init()pageinit。您添加多个 click 事件。例如$("#save-note").off("click").on("click", notes.saveNote);。或将pageinit 绑定到#index 页面。 $(document).on("pageinit", "#index", function () 这将只运行一次 init() 函数。

标签： javascript jquery-mobile mobile web-applications

【解决方案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 绑定到#index 页面。这样notes.init() 将只运行一次。或者删除旧的click 绑定并将其重新绑定到相同的按钮。

$("#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();
});

【讨论】：