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 reliably reproduce this on 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 landing page never loads in the browser. When I uninstall jQuery Mobile, it works the usual way.
I saw this question - adding data-ajax="false"seems to fix the problem, but is it really necessary? What is the point of jQuery Mobile?
$.mobile.ajaxEnabled = false . Github , , jQuery Mobile, .