Prevent jQTouch Links Going Back or to Homepage

Thanks to jQTouch making apps for the iOS (and infact any platform) can now be achieved with nothing more than knowledge of HTML, CSS and jQuery. The purpose of this post isn’t to tell you how to make one of these apps (for that I recommend this excellent tutorial) but rather to explain an annoying scenario that I faced during the process.

The Problem

I will presume that in reading this post you already have knowledge of jQTouch and are here due to experiencing the issue in the title; that a link on your page is taking you back a step, or to the homepage, despite you specifying a ‘href’ attribute and the target div existing.

I faced this exact scenario and was stumped for quite a while, especially after not being able to find a solution elsewhere on the web.

Behold… The Solution

After much rejigging and debugging I finally discovered the problem was that the issue was not with the link, but rather it’s placement in the page in that it was nested inside a div. A simplified version of a non-working page can be seen below:

In the above example notice how the link to the ‘Contact Us’ panel is inside a div. I am unsure as to why this doesn’t work but for me I was getting redirected to wrong place. The solution was to instead place the link ouside of the div and, if required, into an unordered list. An amended working version would now look like so:

One of the jQTouch initialisation options is ‘slideSelector’. Any defined selectors in this comma delimited string will act as an identifier to jQTouch alerting the plugin to which links should cause the application to slide to the relevant page. Let’s take the original example and make it work: