jQuery causes glitch with <input .> <label .>

I've been working on this one for 2 days, and I've finally got the issue isolated! And I don't think it's on my end.

Here's the code I have it narrowed down to:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
</head>

<body>

<input type="radio" id="1">
<label for="1">One</label>

<input type="radio" id="2">
<label for="2">Two</label>

<input type="radio" id="3">
<label for="3">Three</label>

<input type="radio" id="4">
<label for="4">Four</label>

</body>
</html>

In my live code, I only load jquery.mobile.min.js if it's a mobile device. So what I discovered is that, on desktop, the <input> and <label> tags all load as display: inline, as expected. But on mobile, they were loading as display: block.

(I didn't technically confirm that this is the exact CSS, but I know that on desktop they were all in a nice little horizontal row, while on my mobile the first label and input were inline, then the second set of label and input was on the next line, and so on.)

Even more confusing, on desktop they loaded with the input first, as expected; eg, 0 One. But on mobile, they reversed for some reason; eg, One 0.

I finally discovered that I could remove either one of the jQuery libraries, and they would load inline and in order as expected (which is what was happening on my desktop since I wasn't loading jquery.mobile, it just took forever to figure that out).

I'm really just now getting my feet wet with jQuery, so I guess I have 2 questions:

1. Am I correct that I need both of these? I'm pretty sure that I'll just be using jquery.mobile.min.js so that the user can swipe right / left for mobile navigation.

2. Assuming that I do need both, what's the workaround to make these load inline and in the order they're coded? I realize that I can add style="float:left" to each of them and force them to be inline, but it still shows the <input> and <label> in reverse order so that's not a perfect fix.

TIA!

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script> // I tried both of these functions separately $(function(){ $("#body_con").on( "swipeleft", swipeleftHandler ); function swipeleftHandler(event) { alert('yes'); } }); $(function() { $("#body_con").on("swipeleft", function() { alert('yes'); }); });

jQuery causes glitch with <input .> <label .>

csdude55

NickMNS

csdude55

csdude55

NickMNS

csdude55

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week