Кнопка «Назад» всегда находится на внутреннем div

Question

Я разрабатываю приложение для Android с мобильным телефоном Phonegap/JQuery. У меня есть файл Html, который содержит кратные страницы:

<div data-role="page" id="products" > 
    <div data-role="header" >   
     <h1>Produits</h1> 
     <a href="#" data-role="button" data-rel="back" data-icon="back" data-iconpos="notext"  data-direction="reverse"></a>      
    </div> 
    <div data-role="content"> 
     <br> 
     <ul id="cat-list" data-role="listview" class="mainmenu"> 
      <li><a href="#" id=198 >Electronique</a></li> 
      <li><a href="#" id=155 >Services</a></li> 
      <li><a href="#" id=163 >Bonnes Affaires</a></li> 
     </ul> 
    </div> 
</div> 
<div data-role="page" id="productsByCat"> <div> 

Мои файлы сценариев содержит

$(document).on("pagebeforeshow", "#products", function(){ 

    $(this).find('a').unbind('click').click(function(e) { 

     e.preventDefault(); 
     passDataObject.selectedId = this.id; 
     $.mobile.changePage('#productsByCat', { transition: 'slide'}); 
    }); 
}); 

Моя проблема, когда я нажимаю на кнопку назад в продуктах Div, он отображает productsByCat DIV (предыдущий страница - внешняя страница Домашняя страница). Помогите пожалуйста?

Answer 1

Я решил, что, выбрав ListView идентификатор на событие щелчка вместо $ (это) .find («а»):

$(document).on("pagecreate", "#products", function(){ 
     $("#cat-list a").on("click", function(e){ 
      e.preventDefault(); 
      passDataObject.selectedId = this.id; 
      $.mobile.changePage('#productsParCat', { transition: 'slide'}); 
     }); 
});