點擊的列表項目的索引不會重置

在全新的頁面加載時，代碼工作得很好，並且會顯示正確的信息，但是如果向後導航並再次嘗試，它會顯示第一次點擊中的信息。首先，這裏是代碼，我會解釋我有什麼...點擊的列表項目的索引不會重置

$(document).on('pageinit', '#months', function(){ 
    $('#listOfHolidays').on('click', 'li', function() { 
     listIndex = $(this).index(); 
     $.mobile.changePage('#detail'); 
    }); 
}); 
$(document).on('pageinit', '#detail', function(){ 
    console.log(listIndex); 
    $('#ho').text(holidayNames[listIndex]); 
    $('#hi').text('The index of the list item clicked is: ' + listIndex); 

});

我有一個名爲#months，這是一個包含我的項目列表，以便從選擇一個2頁（data-role="page"的div），和#detail這是我希望根據用戶的選擇從列表中填充的頁面。我的列表視圖的ID是#listOfHolidays和array，其中包含列表中每個項目的值稱爲holidayNames。然後，我在div的詳細信息頁面中顯示這個基本信息，這個信息叫做#hi和#ho（其中一些將被改變，我只是試圖解決這個問題）。我還在細節標題中啓用了後退按鈕。

就像我說過的，當我加載這個新鮮的，正確的假日名稱和索引號顯示在我的詳細信息頁面中，但是當我使用後退按鈕導航回去並重試時，它會使用相同的細節頁面來自第一個click的信息。

我想這是因爲jQuery是初始化第二$(document).on()功能的詳細信息頁面'pageinit'並且由於它與第一個索引和節日的名字我選擇初始化，它只是不需要重新初始化，並繪製當我點擊另一個列表項時來自第一個請求的數據。

這是我對發生了什麼事情的模糊理解，所以請糾正我錯在哪裏並指導我朝着正確的方向發展！

謝謝！

來源

2013-05-16 Sam Johnson

這將有助於你看到HTML – RST

'pageinit'事件僅在頁面引入到DOM時觸發。因此，您必須使用新代碼替換節日文字的代碼僅在原始點擊時觸發。接下來的幾次點擊不會導致該功能觸發。

如果綁定到'pagebeforeshow'，那麼每次更改頁面時都會觸發，並且可以在那裏綁定相同的函數，並且它應該可以正常工作。

$(document).on('pagebeforeshow', '#detail', function() { 
    console.log(listIndex); 
    $('#ho').text(holidayNames[listIndex]); 
    $('#hi').text('The index of the list item clicked is: ' + listIndex); 
});

我刪除了一些東西來簡化示例。

JSFiddle example

來源

2013-05-16 18:51:31

完美的答案，我的問題！我不知道如何將「一次介紹給DOM」放入文字中，但這正是我的想法。有沒有一個明顯的地方可以找到有關「pagebeforeshow」這樣的術語的描述的文檔？我查看了.on（）函數的定義，並且沒有明顯的地方尋找第一個參數的可用參數 –

很高興我能幫上忙！ Jquery移動文檔目前分割。你有一個演示部分和api部分。 api部分列出了所有事件和方法。以下是可以綁定到的事件的鏈接：[Jquery Mobile Events]（http://api.jquerymobile.com/category/events/） –

點擊的列表項目的索引不會重置

回答

相關問題