jQuery Mobile触发器“create”除了第一次之外都无法正常工作

Question

我正在使用jQuery Mobile创建一个网站，在首页中放置了一个搜索表单。我钩子了提交事件来进行ajax post。当ajax成功获取资源(html,<ul>...</ul>)后，将其放置在目标容器中，然后触发create事件以增强视图。这在第一次运行时很好用。当我点击返回到首页并再次搜索时，我得到的是一个未增强的原始列表视图，请问为什么？附注：我尝试了许多方法，但问题越来越多，官方文档太差了。

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

编辑：测试URL：http://ijnu.sinaapp.com 另一个问题：第二个ajax请求失败，浏览器直接跳转到ajax的目标页面。

- horsley

---

你的网站是单个HTML文件吗？如果不是，那么每次初始化新页面时，你的事件处理程序都会运行，并且每次都会重新绑定$('#search').submit(...事件处理程序。同时，提供一个我们可以查看的版本链接会很有帮助。 - Jasper

Answer 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');
});

- Fostah

Answer 2

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

例如：

HTML代码

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

JavaScript 代码

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

希望能有所帮助

- Sagar Gala

Answer 3

也许你应该在处理完提交事件后取消挂钩。然后在返回之前的页面时再次启动它。多次添加事件处理程序可能会引起很多问题。

- kristof_w

Answer 4

尝试：

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

替代

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

- stay_hungry

Answer 5

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

我使用的是：

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

});

其中 #opplist 是我加载的 data-role="page" 页面的 id，这不管是第一次加载页面还是之后发生都无所谓，因为事件在页面显示时触发。

请参阅 这里的 jquery 移动事件

此外，请参阅jquery 移动导航

希望这可以帮助！

- scrineym