search

jquery / jquerymobile.com

jQuery Mobile web site content
http://jquerymobile.com
Other
54 stars 65 forks source link

List item href not working when referencing jquery mobile library - 'Init' #144

Closed fletcho closed 7 years ago

fletcho commented 7 years ago

When I add a script tag referencing the JQuery-mobile library to my page the href links in my list items no longer work in Google Chrome or Mozilla Firefox (The links still work in IE 11). Below are the two script tag references that I added to my page:

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>

I added these script references in order to add swiperight and swipeleft events to my page as per the tutorial at: https://www.w3schools.com/jquerymobile/event_swiperight.asp

I used the jQuery Mobile Download Builder to remove the offending code and eventually found the href links worked again when I unchecked the 'Init' option under the 'Core' section with all other options still checked.

To re-create the issue please save the below as an HTML page and create two other (visibly different) mock pages index.html and page1.html within the same directory. When opening the page below in Firefox or Chrome the links won't work but if you replace the JQuery-mobile script tag reference with a bespoke JQuery-mobile reference with only the 'Init' option removed the links work again:

<!DOCTYPE html>
<html>
<head>
<title>SomePage</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
    Before nav
    <div class="style-nav">             
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="page1.html">Page 1</a></li>
        </ul>
    </div>
    After nav
</body>
</html>