$('#subregionListPage').bind('pageinit', function(event){
var output = $('#subregions');
var region = getUrlVars()["reg"];
$.ajax({
url: 'http://localhost:8888/my/getsubregions.php',
dataType: 'jsonp',
cache: false,
data: {reg: region},
jsonp: 'jsoncallback',
timeout: 5000,
success: function(data, status){
var out = '';
$.each(data, function(i,item){
out += '<li><a href="subregions.html">' + item.subregion.capitalize() + '</a></li>';
});
output.append(out);
output.trigger('create');
output.listview('refresh');
},
error: function(){
output.text('There was an error loading the data.');
}
});
});
String.prototype.capitalize = function() {
return this.charAt(0).toUpperCase() + this.slice(1);
}
function getUrlVars() {
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
因此，这段代码的问题在于，它不是在页面最初加载后创建列表，而是在加载并刷新页面后创建列表，我尝试了很多方法，但没有一个起作用。 另外，这是调用脚本的 html 代码。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div id="subregionListPage" data-role="page">
<script src="getsubregions2.js"></script>
<div data-role="header" data-position="fixed">
<h1>Select Sub Region</h1>
</div>
<div data-role="content">
<ul id='subregions' data-role="listview"></ul>
</div>
</div>
</body>
</html>
建议后更新代码:
$(document).on('pagecreate', '#subregionListPage', function(event){
var output = $('#subregions');
$.ajax({
url: 'http://localhost:8888/my/getsubregions.php',
dataType: 'jsonp',
cache: false,
data: {reg: $.urlParam('reg')},
jsonp: 'jsoncallback',
timeout: 5000,
success: function(data, status){
var out = '';
$.each(data, function(i,item){
out += '<li><a href="subregions.html">' + item.subregion.capitalize() + '</a></li>';
});
output.append(out);
output.trigger('create');
output.listview('refresh');
},
error: function(){
output.text('There was an error loading the data.');
}
});
});
String.prototype.capitalize = function() {
return this.charAt(0).toUpperCase() + this.slice(1);
}
$.urlParam = function(name){
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
if (results==null){
return null;
}
else{
return results[1] || 0;
}
}
最佳答案
这是您的代码到底发生了什么:
场景
- 第一次加载页面时，元素
#subregionListPage目前为止 DOM 中还不存在。并为pageinit附加一个处理程序元素上的事件在该元素渲染之前完成。 - 下次重新加载页面时，由于事件处理程序之前已附加到
pageinit事件于#subregionListPage，处理程序被解雇。
引用自jQuery's docs regarding .bind() :
Handlers are attached to the currently selected elements in the jQuery object, so those elements must exist at the point the call to .bind() occurs.
.bind()是 jQuery 实现中较旧的方法(在 1.0 版本中添加)。它不像 .on() 那么灵活方法，因为使用 .on()您可以将事件处理程序附加到当前 DOM 中不存在的元素。
这可以通过将事件处理程序附加到 super 父元素(例如 document )来实现，并且当特定子元素触发事件时，该事件会传播(冒泡)到该父元素。最终，当事件到达子级上下文时，附加到父级的事件处理程序将被触发。
解决方案
替换您的.bind()与 on()像这样:
$(document).on('pageinit', '#subregionListPage', function(event){
/* ... */
}
注意:pageinit自 jQuery v1.4 起，该事件已被弃用。在这种情况下建议使用的事件是 pagecreate .
更新
正如所指出的，您有绑定(bind) pagecreate 的脚本。事件，在 div 内那必须在创建时触发它:
<div id="subregionListPage" data-role="page">
<script src="getsubregions2.js"></script>
<!-- rest of your HTML -->
这里发生的情况是，在初始加载 HTML 时，div #subregionListPage存在，但它的事件绑定(bind)不存在 - 因为所需的 Javascript 代码尚未运行，并且没有注册处理程序来捕获 pagecreate由它触发的事件。
将脚本移至 HTML 的 <head> ，以便您的 JS 在页面首次加载时准备好绑定(bind) #subregionListPage 的特定处理程序.
关于javascript - Ajax仅在刷新页面后才从javaScript获取数据并加载菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33295011/