提示未保存的更改并取消页面转换

时间:2014-09-15 19:07:21

标签: jquery jquery-mobile

我正在使用Jquery Mobile 1.3.1

我正在使用onpagehide事件检查页面上未保存的更改并提示是否继续。所有这些都有效。我无法弄清楚当用户想要留在页面上时,如何实际阻止页面转换到新页面。

 $(document).on("pagebeforehide","#item_delivery_options", function(event, data) {
            if (unsaved_changes()){
                //yes, there are unsaved changes
                if(!prompt_unsaved_changes()){
                    console.log('stay on the page!'); // <-- I see this in the log !!!!
                    // now I want to stop the page transition,  HOW ????
                    event.preventDefault();
                    return false;
                }
            }
        });

我尝试用pagebeforechange替换pagebeforehide,但事件根本不会触发

1 个答案:

答案 0 :(得分:0)

我想出了如何使用绑定到所有页面的pagebeforechange事件来执行此操作(事件在每次页面转换时触发),而不是仅在特定页面即将发生变化时触发,就像我试图完成的那样。除非有人能提出更有效率的东西,否则这是我的解决方案:

 $(document).on( "pagebeforechange", function( event, data ){
    if ( typeof data.toPage === "string" ) {
       if(data.options.fromPage[0].id == 'item_delivery_options'){
          if (unsaved_changes()){
             //unsaved changes
             if(! prompt_unsaved_changes()){
                console.log('stay on the page!');
                event.preventDefault();
                return false;
             }
          }
     }
  });