4

I am using jQuery Mobile to create a site, in the index page I placed here a form for a search. I hooked submit event for ajax post. When ajax success get the resource (html,<ul>...</ul>), placed in the target container, then trigger the create event for enhance the view. This work fine in the first time. When I click back to index page and search again I got a raw listview without enhance, who can tell me why? ps: I have tried many methods but there is more and more problem, the official document was so poor.

$(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;
        });
    });

EDIT： Test Url： http://ijnu.sinaapp.com Another problem: the second ajax request failed and the browser navigate to the ajax target straightly.

4

5 回答 5

1

对我来说， .trigger('create');如果应用于元素，总是有效的data-role="page"

例如

HTML 代码

<div data-role="page" id="somePage">
...
</div>

Javascript代码

$('#somePage').trigger('create');

希望能帮助到你

于 2012-12-15T01:21:04.823 回答
1

You could try changing:

$("#searchresultfield").html(data).find('ul').trigger('create');

to:

$("#searchresultfield").html(data).find('ul').listview().listview('refresh');

Anytime you append or remove elements you need to refresh, and if you remove the whole list, you need to reinitialize it.

Also I have had issues with listview('refresh') rendering improperly if it was not visible.

$(document).on('pageshow','div',function(event, ui){
 if($("#searchresultfield > ul").is(":visible")) $("#searchresultfield > ul").listview('refresh');
});
于 2012-05-07T19:00:59.990 回答
0

尝试：

$("#searchresultfield > ul").empty();

代替

$("#searchresultfield > ul").remove();
于 2012-05-08T03:17:37.463 回答
0

也许您应该在处理完提交事件后尝试取消挂钩。并在您返回之前的页面后再次启动它。多次添加事件处理程序会导致很多问题。

于 2012-05-10T13:01:19.023 回答
0

我认为问题在于 jquery mobile 会加载所有页面，尽管所有页面都来自不同的文件到一个大页面中，并且导航基于转到此页面中的不同点，因此当您第一次进入该页面时会考虑您访问的页面但是，当单击后退按钮并离开该页面时，该页面仍被视为已创建，因此该事件不会再次触发，

我用的是：

$('#oppList').live('pageshow',function(event){
    getList();

});

#opplist 是我刚刚加载的页面的 data-role="page" 的 id，无论是第一次加载页面还是之后发生这种情况都无关紧要，因为每当显示页面时都会触发事件。

在这里查看敌人 jquery 移动事件

另请参阅此处了解jquery 移动导航

希望这可以帮助 ！

于 2012-05-10T08:45:45.100 回答