jquery mobile trigger 'create' 除了第一次之外不起作用答案

【问题标题】：jquery mobile trigger 'create' not working except the first timejquery mobile trigger 'create' 除了第一次之外不起作用
【发布时间】：2012-05-01 14:51:42
【问题描述】：

我正在使用 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目标。

【问题讨论】：

您的网站是单个 HTML 文件吗？如果不是，则每次初始化新页面时，您的事件处理程序都会运行，每次都重新绑定$('#search').submit(... 事件处理程序。我们可以看到的版本的链接也会有所帮助。

标签： javascript jquery ajax jquery-mobile

【解决方案1】：

你可以尝试改变：

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

到：

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

任何时候添加或删除需要刷新的元素，如果删除整个列表，则需要重新初始化。

如果 listview('refresh') 不可见，我也遇到了渲染不正确的问题。

$(document).on('pageshow','div',function(event, ui){
 if($("#searchresultfield > ul").is(":visible")) $("#searchresultfield > ul").listview('refresh');
});

【讨论】：

【解决方案2】：

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

例如

HTML 代码

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

Javascript 代码

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

希望对你有帮助

【讨论】：

【解决方案3】：

试试：

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

而不是

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

【讨论】：

【解决方案4】：

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

我用的是：

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

});

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

见Here foe jquery mobile events

也可以在这里查看jquery mobile navigation

希望这会有所帮助！

【讨论】：

【解决方案5】：

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

【讨论】：