使用外部脚本&未捕获ReferenceError jQuery Mobile [英] Uncaught ReferenceError using external script & jQuery Mobile
问题描述
我试图创建一个web应用程序，但无法让我的javascript工作。
使用全新的浏览器加载页面时，我得到'Uncaught ReferenceError：getResult未定义'（位于js / ajax.js），但是当我刷新页面时，一切正常。我试图移动脚本加载的地方，但我无法让它工作。
我发现了一堆类似的问题，但他们似乎建议加载脚本里面，并不使用$（document）.ready（），我已经这样做了。任何人？编辑：
我注意到，错误只发生在从另一个jQuery移动页面转到时。
Index.html
< ;！DOCTYPE html>
< html>
< head>
< title> sio.signalare.se< / title>
< meta content =width = device-width，user-scalable = noname =viewport>
< meta content =yesname =apple-mobile-web-app-capable>
< meta content =text / html; charset = utf-8http-equiv =Content-Type>
< link rel =stylesheethref =http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css/>
< script src =js / ajax.js>< / script>
< script src =http://code.jquery.com/jquery-1.11.1.min.js>< / script>
< script src =http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js>< / script>
< style>
.wrap {
white-space：normal！important;
}
< / style>
< / head>
< body>
< div data-role =page>
< div data-role =header>
data-iconpos =notexthref =../> < / A>
< h1> ATC-felkoder< / h1>
< / div><！ - / header - >
< div data-role =content>
< ul data-inset =truedata-role =listview>
< li>
< h2 class =wrap> F1< / h2>
< p class =wrap>< strong id =F1-result>< / strong>< / p>
< select id =F1onchange =getResult（this）;>
< option value =selected>Välj< / option>
< option value =0> 0< / option>
< option value =1> 1< / option>
< option value =2> 2< / option>
< option value =3> 3< / option>
< option value =4> 4< / option>
< option value =5> 5< / option>
< option value =6> 6< / option>
< option value =7> 7< / option>
< option value =8> 8< / option>
< option value =9> 9< / option>
< option value =A> A< / option>
< option value =C> C< / option>
< option value =E> E< / option>
< option value =F> F< / option>
< option value =H> H< / option>
< option value =L> L< / option>
< option value =P> P< / option>
< option value =U> U< / option>
< / select>
< / li>
< / ul>
< h6>版本2.0< / h6>
< / div><！ - / content - >
< / div><！ - / page - >
< / body>
< / html>
js / ajax.js
function getResult（e）{
if（e.value）{
var ajax_load =< img src ='img / loader。 gif'alt ='loading ...'/>;
var loadUrl =data / result.php？args =+ e.id +| + e.value;
$（＃+ e.id +-result）。load（loadUrl）;
} else {
$（＃+ e.id +-result）。empty（）;
}
}
在使用jQuery Mobile时，内部页面会忽略< head> 。
I'm trying to create a web app but can't get my javascript to work.
When loading the page with a fresh started browser I get 'Uncaught ReferenceError: getResult is not defined' (is located in js/ajax.js) but when I refresh the page everything works. I have tried to move where the script loading takes place but I can't get it to work.
I found a bunch of similar questions but they seem to suggest to load script inside and to not use $(document).ready() and I am doing that already. Anyone?
EDIT: I noticed that the error only occurs when going from another jQuery mobile page.
Index.html
<!DOCTYPE html>
<html>
<head>
<title>sio.signalare.se</title>
<meta content="width=device-width, user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
<script src="js/ajax.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
<style>
.wrap {
white-space: normal !important;
}
</style>
</head>
<body>
<div data-role="page">
<div data-role="header">
<a class="ui-btn-left" data-direction="reverse" data-icon="back"
data-iconpos="notext" href="../"></a>
<h1>ATC-felkoder</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-inset="true" data-role="listview">
<li>
<h2 class="wrap">F1</h2>
<p class="wrap"><strong id="F1-result"></strong></p>
<select id="F1" onchange="getResult(this);">
<option value="" selected>Välj</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="A">A</option>
<option value="C">C</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="H">H</option>
<option value="L">L</option>
<option value="P">P</option>
<option value="U">U</option>
</select>
</li>
</ul>
<h6>Version 2.0</h6>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
js/ajax.js
function getResult(e) {
if (e.value) {
var ajax_load = "<img src='img/loader.gif' alt='loading...' />";
var loadUrl = "data/result.php?args=" + e.id + "|" + e.value;
$("#" + e.id + "-result").load(loadUrl);
} else {
$("#" + e.id + "-result").empty();
}
}
;TLDR: <head> is ignored on internal pages when using jQuery Mobile.
To use jQuery Mobile with external styles and scripts, you're going to have to load the same set of scripts and styles to every page, per the documentation.
这篇关于使用外部脚本&未捕获ReferenceError jQuery Mobile的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
