javascript - 单击的列表项的索引不会重置

Question

在新页面加载时，代码工作正常并会显示正确的信息，但如果您向后导航并重试，它会显示第一次点击时的信息。首先，这是代码，我将解释我所拥有的...

$(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);

});

我有 2 个页面(带有 data-role="page" 的 div)名为 #months，其中包含我要从中选择的项目列表，并且#detail 这是我要根据用户从列表中的选择填充的页面。我的 ListView 的 ID 是 #listOfHolidays，保存列表中每个项目的值的 array 称为 holidayNames。然后，我在名为#hi 和#ho 的 div 的详细信息页面中显示此基本信息(其中一些将被更改，我只是想测试我解决这个问题的方法)。我还在详细信息的标题中启用了后退按钮。

就像我说的，当我加载这个新鲜的时，正确的假期名称和索引号显示在我的详细信息页面中，但是当我使用后退按钮返回并重试时，它会使用相同的信息填充详细信息页面从第一次点击开始。

我假设这是因为 jquery 正在使用 'pageinit' 在第二个 $(document).on() 函数中初始化详细信息页面，并且因为它已被初始化使用我选择的第一个索引和假期名称，它不需要再次初始化并在我单击另一个列表项时从第一个请求中提取数据。

这是我对正在发生的事情的模糊理解，所以请纠正我错误的地方并指导我正确的方向!

谢谢!

Answer 1

“pageinit”事件仅在页面被引入 DOM 时触发。因此，您必须用新的假期文本替换假期文本的代码只会在原始点击时触发。接下来的几次点击不会触发该功能。

如果您绑定(bind)到“pagebeforeshow”，那么它会在您每次更改页面时触发，您可以在那里绑定(bind)相同的功能，它应该可以正常工作。

$(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