I've got a website that dynamically creates navigational a menu structure...

  1. A menu is displayed first
  2. Click a food selection to obtain another list (which replaces recption menus on screen)
  3. Click the second list to obtain more detail etc. (this replaces their email list)

I dynamically create lists elements <li> to keep the present products on screen and bind these to a javascript function that will get the information from an assortment.
Everything creates my laptops in Chrome, Opera, Ie.
However when I load the web site on my small apple iphone it doesn't work when the user needs to scroll towards the choose a product.

If a listing has 12 products onto it and just the very first 4 are visible once the page loads, I'm able to click the products 1-4 and also the function will properly show the following page as asked for.
However, basically scroll lower and then click item say 10, it will visit the correct page and can not load the information.

All of the information is read from an xml file into an assortment structure once the website loads and that i have confirmed that all the data continues to be read in. Once more this can be useful for all data on my small desktop and laptops. Only on my cell phone will it not go near the technique that's been bound.

  var row = $('#categoryTemplate').clone() //obtain a copy from the list template.

 //Append the li element towards the parent ul

  row.appendTo('#categoryPage ul')



I placed a reminder within the approach to tell me the product was selected. This alert won't show basically have needed to scroll around the page.

Has other people had this issue?

It's very little data - Menu 1 has 6 products.
For the most part you will find 11 products for the following level.
The Final level has for the most part 3 products.