我正在使用jQuery Mobile创建一个网站,在索引页中,我在这里放置了一个搜索表单。我钩住了 ajax 帖子的提交事件。当 ajax 成功获取资源时(html, <ul>...</ul>
),放置在目标容器中,然后触发 create 事件以增强视图。这在第一次工作正常。当我单击返回索引页面并再次搜索时,我得到了一个没有增强功能的原始列表视图,谁能告诉我为什么?ps:我尝试了很多方法,但问题越来越多,官方文件太差了。
$(document).bind('pageinit',function(){
$("#search").submit(function(){
var searchdata = $("#search").serialize();
$.ajax({
'type':"POST",
'url':"/server/jnulib.php?action=search",
'data':searchdata,
'success':function(data){
$("#searchresultfield > ul").remove();
$("#searchresultfield").html(data).find('ul').trigger('create');
try{
$("#searchresultfield > ul").listview('refresh');
}catch(e){
}
$.mobile.changePage("#searchresult");
//$("div[data-role='header'] > a").
}
});
return false;
});
});
编辑:测试网址:http://ijnu.sinaapp.com另一个问题:第二个 ajax 请求失败,浏览器直接导航到 ajax 目标。
您可以尝试更改:
$("#searchresultfield").html(data).find('ul').trigger('create');
自:
$("#searchresultfield").html(data).find('ul').listview().listview('refresh');
无论何时追加或删除需要刷新的元素,如果删除整个列表,则需要重新初始化它。
此外,如果列表视图("刷新")不可见,则我遇到了不正确的渲染问题。
$(document).on('pageshow','div',function(event, ui){
if($("#searchresultfield > ul").is(":visible")) $("#searchresultfield > ul").listview('refresh');
});
,如果应用于带有data-role="page"
的元素,.trigger('create');
总是有效的
例如
网页代码
<div data-role="page" id="somePage">
...
</div>
Javascript Code
$('#somePage').trigger('create');
希望对你有帮助
尝试:
$("#searchresultfield > ul").empty();
而不是
$("#searchresultfield > ul").remove();
我认为问题是jquery mobile将所有页面加载到一个大页面中,尽管所有页面都来自不同的文件,并且导航基于转到此页面中的不同点,因此当您第一次进入它时,您访问的页面被视为已创建,但是当单击后退按钮并离开页面时,该页面仍被视为已创建,因此事件不会再次触发,
我用的是:
$('#oppList').live('pageshow',function(event){
getList();
});
其中 #opplist 是我刚刚加载的页面的 data-role="page" 的 id,无论这是在第一次加载页面时还是之后发生,这都无关紧要,因为每当显示页面时都会触发事件。
在这里看到敌人 jquery 移动事件
另请参阅此处的 jquery 移动导航
希望这有帮助!
也许您应该在处理提交事件后尝试将其解绑。并在返回之前所在的页面后再次启动它。多次添加事件处理程序可能会导致很多问题。