Question

它有时会随机打破它有效，有时则不然。怎么了？

这是我的代码：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=0" />
                   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
            <script src="my.js">
            </script>    
        </head>
        <body>
            <!-- Home -->
            <div data-role="page" id="one">
                <div data-theme="c" data-role="header">
                    <h3>Friends School</h3>
                </div>
                <div data-role="content" style="padding: 15px">
                    <div data-role="fieldcontain">
                    	<input type="submit" id="selectbutton" data-theme="b" data-icon="arrow-r" data-iconpos="right" value="Choose Name" />
                    </div>
                    <input type="submit" id="button" data-theme="a" data-icon="alert" disabled="disabled" data-iconpos="top" value="Check-In" />
    				<small style="display: none;">Not activating? Try going closer to the Upper School office. If still not working just go to the office and check-in manually</small> 
                </div>
    			
            </div>
    		<div data-role="page" id="two" data-theme="a">
    			<div data-theme="c" data-role="header">
                    <h3>Select Name</h3>
                </div>
                <div data-role="content" data-theme="a">
    			<ul data-role="listview" data-filter="true" data-filter-placeholder="Search people..." data-filter-theme="d"data-theme="d" data-divider-theme="d">
    				<li data-role="list-divider">A</li>
    				<li><a name="personname" href="#">Adam Kinkaid</a></li>
    				<li><a name="personname" href="#">Alex Wickerham</a></li>
    				<li><a name="personname" href="#">Avery Johnson</a></li>
    				<li data-role="list-divider">B</li>
    				<li><a name="personname" href="#">Bob Cabot</a></li>
    				<li data-role="list-divider">C</li>
    				<li><a name="personname" href="#">Caleb Booth</a></li>
    				<li><a name="personname" href="#">Christopher Adams</a></li>
    				<li><a name="personname" href="#">Culver James</a></li>
    				<li data-role="list-divider">D</li>
    				<li><a name="personname" href="#">David Walsh</a></li>
    				<li><a name="personname" href="#">Drake Alfred</a></li>
    				<li data-role="list-divider">E</li>
    				<li><a name="personname" href="#">Elizabeth Bacon</a></li>
    				<li><a name="personname" href="#">Emery Parker</a></li>
    				<li><a name="personname" href="#">Enid Voldon</a></li>
    				<li data-role="list-divider">F</li>
    				<li><a name="personname" href="#">Francis Wall</a></li>
    				<li data-role="list-divider">G</li>
    				<li><a name="personname" href="#">Graham Smith</a></li>
    				<li><a name="personname" href="#">Greta Peete</a></li>
    				<li data-role="list-divider">H</li>
    				<li><a name="personname" href="#">Harvey Walls</a></li>
    				<li data-role="list-divider">M</li>
    				<li><a name="personname" href="#">Mike Farnsworth</a></li>
    				<li><a name="personname" href="#">Murray Vanderbuilt</a></li>
    				<li data-role="list-divider">N</li>
    				<li><a name="personname" href="#">Nathan Williams</a></li>
    				<li data-role="list-divider">P</li>
    				<li><a name="personname" href="#">Paul Baker</a></li>
    				<li><a name="personname" href="#">Pete Mason</a></li>
    				<li data-role="list-divider">R</li>
    				<li><a name="personname" href="#">Rod Tarker</a></li>
    				<li data-role="list-divider">S</li>
    				<li><a name="personname" href="#">Sawyer Wakefield</a></li>
    			</ul>	
                </div>		
    		</div><!-- /page two -->
            <script>
            
            	var tries = 0;
                function check(){
    				//alert('d');
    				
    				if(tries>4){
    					first=true;
    					$("small").fadeIn(3000);
    					//alert("In")
    				}
    				else{
    					$("small").fadeOut(3000);
    				}
    				
    				navigator.geolocation.getCurrentPosition( function(loc){
    					var lat1 = 39.35691630053478;
    					var lon1 = -76.62641812613514;
    					//var lat1 = 39.4354312;
    					//var lon1 =  -76.6642454;
    					var lat2 = loc.coords.latitude;
    					var lon2 = loc.coords.longitude;
    					var radlat1 = Math.PI * lat1/180
    					var radlat2 = Math.PI * lat2/180
    					var radlon1 = Math.PI * lon1/180
    					var radlon2 = Math.PI * lon2/180
    					var theta = lon1-lon2
    					var radtheta = Math.PI * theta/180
    					var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
    					dist = Math.acos(dist)
    					dist = dist * 180/Math.PI
    					dist = dist * 60 * 1.1515
    				
    					if(dist < 0.06){
    						$('#button').button('enable');	
    						tries = 0;
    						//$( "#button" ).text("Check-In");
    						$('#button').buttonMarkup({ icon: "star" });
    					}
    					else{
    						//$("#button" ).text("Not on campus.");
    						tries += 1;
    						$('#button').button('disable');	
    						$('#button').buttonMarkup({ icon: "alert" });
    					}
    					//alert(dist);
    					
    
    				});
    				
    				$('#button').button('refresh');
    			}
    		var id = setInterval("check()",2000);
    		$( "#button" ).bind( "click", function(event, ui) {
    			$('#button').buttonMarkup({ icon: "check" });
    			$('#button').button('disable');	
    			$( "#button" ).text("Checked in.");
    			$('#button').button('refresh');
    			window.clearInterval(id);
    			//$.mobile.changePage("#two", "flip", true, false);
    		});
    		$( "#selectbutton" ).bind( "click", function(event, ui) {
    			//alert('d');
    			$.mobile.changePage("#two", "slide", true, false);
    		});
    		$( "[name=personname]" ).bind( "click", function(event, ui) {
    			//alert($(this).html());
    			$("#selectbutton").prop('value', $(this).html());
    			$('#selectbutton').button('refresh');
    
    			$.mobile.changePage("#one", "slide", true, false);
    
    			
    		});
    
            </script>
    		
    
        </body>
    </html>

这有什么问题，有时它有时不起作用。

然而它适用于JSFiddle：http://jsfiddle.net/5e4ue/

我在同一台服务器上的两个不同的域上尝试了它，有时它可以在一个上工作但不能在另一个上使用相同的服务器代码。出来就像 On iPhone

Answer 1

出于某种原因，您的网站会将header发送为utf-16，这会破坏您的css文件尝试将此添加到您的.html文件中：

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

这是您的css文件链接标记

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" charset="UTF-8"/>

如果您是服务器端编程（例如php），您可以使用：

header('Content-Type: text/html; charset=utf-8');

作为最后的手段，请确保您的文件在您使用的任何编辑器中保存为utf-8。查看有关如何执行此操作的文档;大多数情况下，它可以在文档设置或首选项中设置。

修改如果没有什么效果最好的话就是自己托管文件，因为最终问题出在那里。

JQuery Mobile页面随机中断

1 个答案: