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

时间:2013-05-16 18:14:48

标签: javascript jquery dom jquery-mobile

在新页面加载时,代码工作正常并显示正确的信息,但如果您向后导航并再次尝试,则会显示第一次单击时的信息。首先,这是代码,我将解释我的内容......

$(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。然后我在详细页面中显示这个基本信息,在div中称为#hi和#ho(其中一些将被更改,我只是试图测试我的出路问题)。我还在详细信息标题中启用了后退按钮。

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

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

这是我对正在发生的事情的模糊理解,所以请纠正我错在哪里并指导我朝正确的方向前进!

谢谢!

1 个答案:

答案 0 :(得分:2)

'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