I added jQuery Mobile to my project because I want swipe events to trigger Bootstrap carousel scrolls. After coding with it for a day or so I noticed that internal links no longer work. I can reproduce this reliably with the following two pages, test1.html:
<html>
<head></head>
<body>
<a href="test2.html">Another page</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.min.js">
</script>
</body>
</html>
and test2.html:
<html>
<head></head>
<body>
<a href="test1.html">First page</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.min.js">
</script>
</body>
</html>
When I click the link, jQuery code will throw a handled exception that is swallowed, but the target page never loads in the browser. When I remove jQuery Mobile, it works in a normal way.
I have seen this question - adding data-ajax="false" does seem to fix the issue, but is this really necessary? What's the point of jQuery Mobile then?
$.mobile.ajaxEnabled = false did not do anything. I also came across this discussion on Github and had hopes that the issue only happened when linking to non-jQuery Mobile pages, but it does not.
This is something unique to jQuery Mobile.
First you are missing one big information, never mix jQuery Mobile with other frameworks, if you only need to use just one functionality. In that case you should customize jQuery Mobile and use/build only needed functionality. Find it here.
In your case you are using full jQuery Mobile framework and it will overtake your complete project. jQuery Mobile uses AJAX to handle page management, which means it will load pages into the DOM to make them run as smooth as possible.
When working with with multiple HTML template only first HTML file is fully loaded into the DOM. When you open another page jQuery Mobile will strip HEAD and load only div with data-role="page" attribute, because you don't have such div page transition will fail.
When you disable AJAX loading data-ajax="false" attribute you will force jQuery Mobile to use classic page handling.
Basically just follow my first advice and rebuild jQuery Mobile using only functionality you really need. Use full jQuery Mobile framework only if you intend to use it as UI framework and nothing else, never ever.
Feel free to ask me if you need more information.