jQuery Mobile 動態頁面載入失敗：航空頁面資料不顯示排查指南

現象描述

使用 jQuery Mobile 建立三個 data-role="page"（全部、酒店、航空），透過 AJAX 取得 XML 資料動態產生 ListView。其中「航空」頁面（#airline）無法顯示資料，其他兩頁正常。

程式碼關鍵片段

// 成功回呼中
airline = $('#airline_');
var iHtml_a = '';
// ... 迴圈組裝 iHtml_a ...
iHtml_a += '<a class="ui-btn" href="#">+添加更多</a>';
airline.html(iHtml_a).listview('refresh'); // 報錯或無反應

錯誤訊息

Uncaught Error: cannot call methods on listview prior to initialization

根因分析

1. 頁面尚未初始化：jQuery Mobile 在頁面首次顯示（pagecreate / pageinit 事件）時才將 <ul data-role="listview"> 增強為 ListView 元件。若在頁面隱藏狀態下直接呼叫 .listview('refresh')，元件尚未建立，拋出錯誤。
2. DOM 就緒時機：$(document).ready() 或 $(function(){}) 只保證文檔載入完成，不代表 jQM 已增強所有頁面。

解決方案

方案一：在頁面初始化事件中填充資料（推薦）

$(document).on('pagecreate', '#airline', function() {
    loadAirlineData(); // 此時 listview 已初始化，可直接 .html().listview('refresh')
});

function loadAirlineData() {
    $.ajax({ ... success: function(data) {
        var html = buildListHtml(data, 2); // flag==2
        $('#airline_').html(html).listview('refresh');
    }});
}

方案二：手動初始化後再刷新

// 確保元件存在
if (!$('#airline_').hasClass('ui-listview')) {
    $('#airline_').listview(); // 初始化
}
$('#airline_').html(html).listview('refresh');

方案三：延遲執行（治標不治本）

setTimeout(function() {
    airline.html(iHtml_a).listview('refresh');
}, 0); // 讓事件迴圈先處理頁面初始化

最佳實務建議

• 資料載入邏輯集中在 pagecreate 或 pagecontainerbeforeshow 事件，確保元件就緒。
• 避免在全域 AJAX 回呼中直接操作非當前頁面的元件。
• 若資料量大，考慮使用 listview('refresh', true) 僅更新變更項目，或採用虛擬清單。

總結

「cannot call methods on listview prior to initialization」核心原因是操作時機早於元件初始化。掌握 jQuery Mobile 頁面生命週期（pagecreate → pageinit → pageshow），在正確事件中填充動態資料即可解決。