I am using jQueryMobile and Backbone and am having problems with custom or dynamically generated back buttons not going back in the history properly. I am using the data-rel="back" attribute on anchor tags as described in the documentation: http://view.jquerymobile.com/1.3.2/dist/demos/widgets/headers/
My back button code is as follows:
<a href="#" data-rel="back" data-icon="arrow-l" data-iconpos="notext"></a>
When I click the back button it doesn't seem to use the data-rel="back" functionality at all and instead goes to the page as specified in the href attribute, which in most cases is '#' or empty.
This can be confirmed by hard-coding a different href value - the back button will go that page, and not the previous page in the history as it's supposed to.
I suspect it to be a conflict between Backbone and jQuery Mobile and the configurations necessary to get them to work nicely (let Backbone handle page transitions), but do not know how to get around it.
As described in the jQM docs I had to set the following in a mobile-config file:
$.mobile.ajaxEnabled = false;
$.mobile.linkBindingEnabled = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
$.mobile.changePage.defaults.changeHash = false;
Note: I've reviewed many of the posts on this subject on SO before posting and there doesn't seem to be a suitable solution presented in any of the responses.
I figured it out. It was a combination of implementing the solution found here: jQuery Mobile + backbone.js: page transition when going back
AND
adding an attribute 'data-bypass' to all my anchor tags that I wanted to bind custom events to as I was using a piece of code from the Backbone Boilerplate project to handle relative urls.