被点击列表项的索引未重置

Question

被点击列表项的索引未重置

3

在页面初始加载时，代码可以正常工作并显示正确的信息，但是如果您向后导航并再次尝试，则会显示从第一次点击开始的信息。首先，这就是代码，我将解释我拥有的内容...

$(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和#detail。其中#months是我要从中选择项目列表的页面，而#detail则是一个我希望根据用户在列表中所选项目来填充信息的页面。我的列表视图的ID是#listOfHolidays，存储每个项目值的数组称为holidayNames。然后，我将这些基本信息显示在详细页面中的名为#hi和#ho的div中（其中一些内容将被更改，我只是试图解决这个问题）。在详细信息页面的标题中启用了返回按钮。

像我说的那样，当我第一次加载时，正确的节日名称和索引号显示在我的详细信息页面中，但是当我使用返回按钮导航回去并再次尝试时，它会将详细信息页面填充为第一次点击时相同的信息。

我认为这是因为jquery在第二个$(document).on()函数中使用'pageinit'初始化详细信息页面，并且由于它以我选择的第一个索引和节日名称进行初始化，因此它不需要重新初始化，并在我单击另一个列表项时从第一个请求中提取数据。

这就是我对情况的模糊理解，请在我错误的地方纠正我并指导我正确方向！

谢谢！

- Sam Johnson

能否提供你的HTML代码，这样会更有帮助。 - RST

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Aaron Springer · Accepted Answer

'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 示例