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

Posted 2023-05-09

【中文标题】单击的列表项的索引不会重置

【英文标题】：Index of list item clicked does not reset

【发布时间】：2013-05-11 18:26:06

【问题描述】：

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

$(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 这是我要根据用户的选择填充的页面名单。我的列表视图的 id 是#listOfHolidays，而保存列表中每个项目值的array 称为holidayNames。然后，我在名为 #hi 和 #ho 的 div 的详细信息页面中显示此基本信息（其中一些将被更改，我只是想测试解决此问题的方法）。我还在详细信息的标题中启用了后退按钮。

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

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

这是我对正在发生的事情的模糊理解，所以请纠正我的错误并引导我朝着正确的方向前进！

谢谢！

【问题讨论】：

查看您的 html 会有所帮助

【参考方案1】：

“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

【讨论】：

完美回答我的问题！我不知道如何将“被介绍给 DOM 一次”用语言表达，但这正是我的想法。是否有一个明显的地方可以找到包含“pagebeforeshow”等术语描述的文档？我查看了 .on() 函数的定义，没有明显的地方可以为第一个参数寻找可用的参数

很高兴我能帮上忙！ Jquery 移动文档目前已拆分。您有一个演示部分和一个 api 部分。 api 部分列出了所有事件和方法。这是您可以绑定到的事件的链接：Jquery Mobile Events