嗨，我是javascript和jquery的新手，我正在构建一个phonegap应用程序。
在我的应用程序中，我尝试使用iscroll和iscrollview在网站http://www.x-services.nl/category/phonegap-cordova中演示
来实现提取刷新功能<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Event Info</title>
<style>
.ui-page {
-webkit-backface-visibility: hidden;
}
#navgroup {text-align:center;}
#navgroup div {display:inline-block;}
.nav-glyphish-example .ui-btn .ui-btn-inner { padding-top: 40px !important; }
.nav-glyphish-example .ui-btn .ui-icon { width: 30px!important; height: 30px!important; margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: none !important; border-radius: none !important; }
#chat .ui-icon { background: url(images/icons/09-chat-2.png) 50% 50% no-repeat; background-size: 24px 22px; }
#email .ui-icon { background: url(images/icons/18-envelope.png) 50% 50% no-repeat; background-size: 24px 16px; }
#login .ui-icon { background: url(images/icons/30-key.png) 50% 50% no-repeat; background-size: 12px 26px; }
#beer .ui-icon { background: url(images/icons/88-beermug.png) 50% 50% no-repeat; background-size: 22px 27px; }
#coffee .ui-icon { background: url(images/icons/100-coffee.png) 50% 50% no-repeat; background-size: 20px 24px; }
#skull .ui-icon { background: url(images/icons/21-skull.png) 50% 50% no-repeat; background-size: 22px 24px; }
</style>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
<link rel="stylesheet" type="text/css" href="css/mobiscroll.custom-2.5.4.min.css">
<link rel="stylesheet" type="text/css" href="css/jqm-icon-pack-fa.css">
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.iscrollview.css">
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.iscrollview-pull.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js" > </script>
<script type="text/javascript" src="scripts/mobiscroll.custom-2.5.4.min.js" ></script>
<script type="text/javascript" src="scripts/iscroll.js" ></script>
<script type="text/javascript" src="scripts/jquery.mobile.iscrollview.js" ></script>
<script type="text/javascript" src="scripts/indexinfo.js"></script>
<!-- script type="text/javascript" src="scripts/date.js"></script> -->
<script src="phonegap.js"></script>
<script type="text/javascript">
</script>
</head>
<body id="body">
<div id="plistview" data-role="page" >
<script src="scripts/date.js"></script>
<div data-role="header" data-position="fixed" data-tap-toggle="false" id="header" data-theme="a">
<!-- <a id="calendarlink" href="calendarview.html" data-icon="" class="ui-btn-left" data-ajax="false">Calendar</a>
<a id="calendarlink" data-role="button" href="#" data-icon="calendar" class="ui-btn-right" data-transition="slideup" data-prefetch="true"></a>
<a id="filterlink" data-role="button" href="#pfilterview" data-icon="filter" class="ui-btn-right" data-transition="slideup" data-prefetch="true"></a>
-->
<div class="ui-btn-right">
<a id="calendarlink" href="calendarview.html" data-role="button" data-icon="calendar" data-iconpos="notext" data-theme="c" data-inline="true" data-transition="slide">Calendar</a>
<a href="#" data-role="button" data-icon="list" class="ui-btn-active" data-iconpos="notext" data-theme="c" data-inline="true">list</a>
<a href="#pfilterview" data-role="button" data-icon="filter" data-iconpos="notext" data-theme="c" data-transition="slideup" data-inline="true">filter</a>
</div>
<h1>Event Info</h1>
</div>
<p id="paragraph"></p>
<div id="middlecontent" data-role="content" data-iscroll>
<div class="iscroll-pulldown">
<span class="iscroll-pull-icon"></span>
<span class="iscroll-pull-label"
data-iscroll-loading-text="News is being refreshed"
data-iscroll-pulled-text="Release to refresh the news">
Refresh the news
</span>
</div>
<div id="eventlist">
<!-- <a id="getpreviouseventsbutton" href="#" data-role="button" data-mini="true" >Get previous events</a> -->
<br>
<ul id="upcomingevents" data-role="listview" data-inset="true">
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
</ul>
<br>
<!-- <a id="getmoreeventsbutton" href="#" data-role="button" data-mini="true" >Get next month events</a> -->
</div>
<br> <br> <br> <br>
</div>
<div data-role="footer" id="footer" data-position="fixed" data-tap-toggle="false">
<div data-role="navbar">
<div id="navgroup" data-role="controlgroup" data-type="horizontal" data-mini="true">
<a id="listlink" href="#" data-role="button" data-icon="" class="ui-btn-active ui-state-persist" >List</a>
<a id="calendarlink" href="calendarview.html" data-role="button" data-icon="" data-transition="slide">Month</a>
</div>
<!-- <div data-role="controlgroup" data-type="horizontal">
<ul>
<li><a id="listlink" href="#" data-role="button" data-icon="" class="ui-btn-active ui-state-persist" >List</a></li>
<li><a id="calendarlink" href="calendarview.html" data-role="button" data-icon="" class="ui-btn-center" data-transition="slide">Calendar</a></li>
</ul>
-->
</div>
</div>
</div>
<div id="pfilterview" data-role="page" >
<script type="text/javascript">
$(document).one("pageshow",'#pfilterview',function(){
console.log("category list is loading");
$.ajax({
beforeSend: function() { $.mobile.showPageLoadingMsg(); }, //Show spinner
complete: function() { $.mobile.hidePageLoadingMsg() }, //Hide spinner
url: 'http://linuxweb.symsoft.local/ycal/index.php/event/Categories?callback=test',
dataType: 'jsonp',
success: function( arr ) {
for(var i=0;i<arr.length;i++){
$('#categories').append( '<label><input class="selectedcategory" value="'+arr[i].category+'" name="'+arr[i].category+'" type="checkbox">'+arr[i].category+'</label>').trigger( "create" );
}// this logic assumes that the data is in ascending order by date
//code to fill the event list page ends
//$('#upcomingevents').listview('refresh');
},
error: function( data ) {
console.log( "error" );
alert( "ERROR: " + data );
}
});
});
$(document).on('click','#apply',function(e){
e.preventDefault();
filteredcategories=[];
$('#categorylist :checked').each(function() {
filteredcategories.push($(this).val());
});
console.log("filtered values -> "+filteredcategories);
updatelistview();
});
$(document).ready(function(){
$('#selectbutton').toggle(function(){
$('input:checkbox').prop('checked',true).checkboxradio("refresh");
$(this).val('Deselect all').button('refresh');
},function(){
$('input:checkbox').prop('checked',false).checkboxradio("refresh");
$(this).val('Select all').button('refresh');
})
});
</script>
<div data-role="header" data-position="fixed" data-tap-toggle="flase">
<a href="#plistview" id="apply" ..data-icon="" class="ui-btn-left" data-transition="slidedown">Cancel</a>
<a href="#" id="apply" data-icon="" class="ui-btn-right" data-transition="slidedown">Apply</a>
<h1>Filter</h1>
</div>
<div data-role="content">
<div id="categorylist">
<form id="categories">
<input class="check" id="selectbutton" type='button' value="Select All">
</form>
<br><br>
<a href="#plistview" id="apply" data-icon="" data-role="button" data-mini="true" data-transition="slidedown">Apply</a>
</div>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="flase">
</div>
</div>
</body>
</html>
我得到ReferenceError：未定义iScroll jquery.mobile.iscrollview.js 第259行指向iscrollview.js我无法弄清楚此引用错误的原因。
该行是_subclass（IScroll，iScroll），iScroll未定义。这里的iScroll var是一个超级构造器类型var 我无法理解造成这一原因的原因
答案 0 :(得分：1)
我不知道为什么，但是在1973行的iscroll.js中是window.IScroll = IScroll;
我认为这是错误的。
右边是window.iScroll = IScroll;
我改变并为我工作。
答案 1 :(得分：0)
我不会将此称为“奇怪错误”，您似乎没有在您的应用中包含您在顶部的<script>标记中引用的所有JS文件。