使用jQuery Mobile開發移動應用程序時，在一個頁面上彈出對話框，關閉對話框后，發現原來的頁面被刷新了。如果原頁面上有一些已經選擇或者填寫的數據，則這些數據就會丟失。這時候，就需要對對話框的返回按鈕做一些處理，讓頁面返回到對話框父頁面在彈出對話框執勤的狀態。

彈出對話框的按鈕一般寫法如下：

<a href="/Dialogs/MyDialog.htm"?data-role="button"data-rel="dialog"?data-transition="pop">彈出對話框</a>

對話框頁面的返回按鈕如下：

<a href="~/Home/Index" data-icon="back" data-role="button">返回列表</a>

上面的這種方式，返回后，Index頁面上的數據都因為刷新丟失了！

特別是當Index頁面上需要點擊按鈕通過Ajax加載列表數據時，點擊返回關閉對話框后，Ajax加載的列表數據全部丟失，非常頭疼！

通過在StackOverFlow網站上搜索，找到了答案！解決方法非常簡單：將對話框頁面的“返回”按鈕修改成如下方式即可：

<a href="~/Home/Index" data-icon="back"οnclick="$('.ui-dialog').dialog('close'); return false;"?data-role="button">返回列表</a>

需要特別注意?οnclick="$('.ui-dialog').dialog('close'); return false;"，后面的 return false 讓承載對話框的頁面回到原來的狀態。【這是阻止瀏覽器默認行為，也就是超鏈接不跳轉】

帖子地址：http://stackoverflow.com/questions/10286562/jquery-mobile-closing-dialog-reloads-calling-page

?

重要附加：

后來自己又做了好幾次實驗發現，要保持原頁面（對話框的父頁面）內容不變，原頁面需要完全加載，即跳轉到對話框父頁面的連接中要添加data-ajax="false"屬性。這樣，對話框的父頁面是完全加載的，關閉對話框頁面后，父頁面的內容不變。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的jQuery Mobile弹出对话框后不刷新原页面，保持原页面内容不变的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。