將哈希值附加到URL時未顯示JQueryMobile彈出窗口

Question

我試圖在我的頁面中打開一個jQuery DateBox彈出窗口，該彈出窗口修改了窗口的哈希值，因此后退瀏覽器按鈕將關閉彈出窗口，而不是轉到瀏覽器歷史記錄中的上一個網站。

<div data-role="page" id="base-layout">
    <div data-role="content" id="my-content-layout">
        <div id="divDesde">
            <label for="divDesde" style="text-align: left;">From Date:</label>
            <input data-theme="c" name="fechaDesde" id="fechaDesde" type="text" data-role="datebox" data-options='{"enablePopup": true, "useNewStyle":true, "centerHoriz": true, "centerVert": true, "mode":"datebox", "overrideDateFormat": "%d/%m/%Y"}' value="" class="required" required="required" />
        </div>
        <div id="divHasta" class="desdeHastaDiv">
            <label for="fechaHasta" style="text-align: left;">To Date:</label>
            <input data-theme="c" name="fechaHasta" id="fechaHasta" type="text" data-role="datebox" data-options='{"enablePopup": true,"useNewStyle":true, "centerHoriz": true, "centerVert": true, "mode":"datebox", "overrideDateFormat": "%d/%m/%Y"}' value="" />
        </div>
    </div>
</div>
<script>
    $(document).on("pageinit", "#base-layout", function() {

        $('#fechaHasta').on('datebox', function(e, p) {
            if (p.method === 'open') {
                window.location.hash = "#fechaHasta";
            }
            if (p.method === 'close') {
                window.location.hash = '';
            }

        });
        $('#fechaDesde').on('datebox', function(e, p) {
            if (p.method === 'open') {
                window.location.hash = "#fechaDesde";
            }
            if (p.method === 'close') {
                window.location.hash = ''
            }

        });
    });
</script>

問題是-修改哈希似乎會以某種方式破壞彈出窗口，並且在您第一次單擊時無法打開。 實際上，它確實是打開的，但是在附加哈希值后會自動關閉。

盡管看不到哈希，我在這里創建了一個小提琴。 我猜因為頁面上方的jsFiddle層而沒有顯示。 您可以在瀏覽器上單擊返回以關閉彈出窗口。 如果單擊輸入上的日歷圖標，則第一次不顯示，如果再次單擊，則不顯示。

Answer 1

jQuery mobile的內部導航模型使用哈希來跟蹤頁面狀態。 它偵聽哈希更改事件，當您自己更新哈希時，會將其視為頁面更改，並以某種方式決定關閉日期框。 您可以在此處的 “哈希和Ajax驅動頁面導航”下閱讀有關它的信息。

幸運的是，解決方案非常簡單。 只需從代碼中刪除所有哈希更新部分即可。 由於jquery mobile本身在您單擊日歷時會添加一個哈希，因此您可以依靠它在單擊瀏覽器后退按鈕時關閉日期框。

- 編輯 -

好的，用下面的代碼替換腳本似乎可行。 我已經在機器上檢查過了。

    $(document).on("pageinit", "#base-layout", function() {

        $('#fechaHasta').on('vmousedown', function() { 
                    window.location.hash = "fechaHasta";
        });

        $('#fechaDesde').on('vmousedown', function() { 
                    window.location.hash = "fechaHasta";
        });

        $('#fechaHasta').on('datebox', function(e, p) { 
            if ( p.method === 'close' ) {
               window.location.hash = ''
            }
        });

        $('#fechaDesde').on('datebox', function(e, p) {
            if ( p.method === 'close' ) {
               window.location.hash = ''
            }
        });
});

當您在' vmousedown '事件上添加哈希時，日歷尚未打開，並且jquery mobile此時無法關閉，因此您可以將其視為快速而骯臟的hack。