Question

有一个让我疯狂的问题！我怀疑我做错了什么......

我在同一个HTML文件中使用多个页面的jQuery mobile。

我有一个页面#mainregister，我会检查是否有任何用户更改。如果他们试图离开，我会使用此代码停止导航（使用我在此处找到的信息）：

    $(document).on("pageinit", '#mainregister', function(){
    $(document).on('pagebeforechange', function(e, data){  
        ResetTimeOutTimer(); // Reset inactivity timer
        if (typeof data.toPage != "string") {
            if (isDirty) {

                var to = data.toPage.attr('id');
                to = '#' + to;
                console.log(to);
                if(to !== '#mainregister')
                {
                   var confirmationMessage = 'It looks like you have been editing something. '
                                + 'If you leave before saving, your changes will be lost.';

                    e.preventDefault();
                    e.stopPropagation();
                    isDirty =  false;
                    console.log(to);
                    $("#leavebutton").on('click', function(){
                        changePage(to, false);
                        return false; // This is to prevent events bubbling up and causing double page flips
                                      // See https://github.com/jquery/jquery-mobile/issues/2369#issuecomment-4830800
                                        // and https://css-tricks.com/return-false-and-prevent-default/
                    });

                    $("#leavetext").html(confirmationMessage);                  
                    $('#confirmLeave').popup('open'); 
                    return false;
                } 

            }
        }
    });

});

这会弹出一个弹出窗口，询问用户是否要保存或离开。此弹出窗口定义为：

<!-- Leave Warning Popup -->
        <div data-role="popup" id="confirmLeave" data-overlay-theme="a" data-theme="a" style="max-width:400px;" class="ui-corner-all">
            <div data-role="header" data-theme="a" class="ui-corner-top">
                <h1>Info</h1>
            </div>
            <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content" id="leaveContent">
                <h3 class="ui-title" id="leavetext"></h3>
                <input type="button" value="Save" onclick="SaveRegister()"/>
                <input type="button" value="Leave" id="leavebutton"/>
            </div>
        </div>
        <!-- End Leave Warning Popup -->

现在，如果用户从#mainregister“退回”，导航将停止并显示弹出窗口。如果用户选择保存，则会进行保存，但即使我们仍在“#mainregister”页面上，URL仍会更改。

因此，用户在index.html/#mainregister上，点击后退按钮，弹出窗口，用户选择保存，弹出窗口关闭，显示的页面仍然是#mainregister，但网址现在是index.html但是应该是index.html/#mainregister。

所以，现在URL和实际页面不匹配;和导航在这里有点破裂。

我是否使用了错误的页面事件？或其他什么？

另外（可能是相关的）我注意到如果我在弹出窗口之后（在其他用例中）返回，我会得到两次相同的URL - 例如`\ index.html＃\ index.html（这是因为我正在从file：//或其他东西进行测试）？

jquery mobile - 在preventdefault上更新的URL

0 个答案: