jQuery Mobile 页面事件

jQuery Mobile 的 页面事件（Page Events） 是整个框架的灵魂，2025 年维护老项目时 99% 的逻辑都靠它们。
下面给你最全、最准、最实用的 2025 年版 jQuery Mobile 页面事件速查表 + 最佳实践写法（基于 1.4.5 最终版）。

事件名称	触发顺序	触发次数	2025 年推荐用途	官方推荐写法（事件委托）
pagebeforecreate	1	只一次	极早期修改 DOM（比如判断登录后动态插入不同页面）	$(document).on("pagebeforecreate", "#page1", fn)
pagecreate	2	只一次	最最最重要的事件！ 初始化插件、绑定事件、渲染图表	$(document).on("pagecreate", "#page1", fn) ← 2025 年必写
pageinit	–	已废弃（1.4 后等同 pagecreate）	老项目常见，建议全部改成 pagecreate	尽量不要用
pagebeforeshow	3	每次进入都触发	检查登录、加载最新数据、显示 loading	$(document).on("pagebeforeshow", "#page1", fn) ← 每次刷新数据都写这里
pageshow	4	每次进入都触发	启动轮播、播放声音、开启倒计时、隐藏 loading	$(document).on("pageshow", "#page1", fn) ← 页面真正显示后执行
pagebeforehide	5	每次离开前	暂停视频、停止倒计时、保存草稿	$(document).on("pagebeforehide", "#page1", fn)
pagehide	6	每次离开后	清理资源、销毁插件	$(document).on("pagehide", "#page1", fn)
pageremove	–	页面被彻底移除	极少用	–
pagechange	全局	任何页面切换后	全局统计、关闭全局 loading	$(document).on("pagechange", fn)
pagechangefailed	全局	跳转失败（如页面不存在）	404 处理	$(document).on("pagechangefailed", fn)

2025 年最推荐的“黄金三件套”写法（直接复制到项目里就赢）

// 1. 初始化（只执行一次）—— 所有插件、事件绑定都写这里
$(document).on("pagecreate", "#task-list", function () {
    renderTaskList();           // 首次渲染
    $("#task-list").on("swipeleft", ".item", deleteItem);  // 事件委托
    startAutoRefresh();         // 启动定时器
});

// 2. 每次进入页面（包括后退缓存回来）—— 刷新数据必写
$(document).on("pagebeforeshow", "#task-list", function () {
    showLoading();
    loadLatestDataFromServer(); // 每次都拉最新数据
});

// 3. 页面真正显示完成—— 启动动画、关闭 loading
$(document).on("pageshow", "#task-list", function () {
    hideLoading();
    startCarousel();            // 轮播图开始
    refreshListview();          // 必须！动态内容要 refresh
});

经典实战场景（2025 年最常见的 8 个用法）

场景	推荐写在哪个事件	示例代码
登录状态检查	pagebeforeshow	if (!isLogin) $.mobile.changePage("#login")
加载最新数据	pagebeforeshow	loadData()
首次渲染图表	pagecreate	new Chart(ctx, config)
每次进入都刷新图表	pageshow	myChart.update()
动态添加 listview 项	pageshow + 最后 listview("refresh")	$("#mylist").append(html).listview("refresh")
离开页面暂停视频	pagebeforehide	video.pause()
全局 loading	pagechange + pagechangefailed	$.mobile.loading("show") / $.mobile.loading("hide")
横竖屏后重新布局	orientationchange + pageshow	$.mobile.activePage.trigger("updatelayout")

2025 年必须记住的“三大铁律”

1. 永远用 $(document).on("pagecreate", ...) 代替 $(function(){})
   → 否则动态页面不执行！
2. 动态添加的 listview、slider、checkbox 必须手动 refresh
   → 否则不显示样式！

   $("#mylist").listview("refresh");
   $("#myslider").slider("refresh");

3. 需要每次刷新的数据写在 pagebeforeshow，只初始化一次的写在 pagecreate
   → 完美解决后退缓存不刷新的问题！

把这张表保存下来，下次接手任何 jQuery Mobile 老项目，直接照着写，3 分钟就能上手！

需要我给你 「jQuery Mobile 页面事件一页纸速查表（高清 PDF + 深色模式）」 或 「10 个经典页面事件完整 Demo 合集」，随时说一声，立即打包发你！