2012-05-01 107 views
4

我正在使用jQuery Mobile来创建一个网站,在索引页中我在这里放置了一个表单进行搜索。我迷上了Ajax post的提交事件。当ajax成功获取放置在目标容器中的资源 (html,<ul>...</ul>)后,触发创建事件以增强视图。这项工作第一次很好。当我点击回到索引页并再次搜索时,我得到了一个未加强的原始列表视图,谁能告诉我为什么? ps:我已经尝试了很多方法,但是问题越来越多,官方文件太差了。jquery移动触发器'创建'不工作,除了第一次

$(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目标笔直。

+0

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

回答

1

你可以尝试改变:

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

到:

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

任何时候你追加或删除您需要刷新的元素,如果你删除整个列表,你需要重新初始化它。

此外,如果它不可见,我有问题与ListView('刷新')呈现不当。

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

尝试:

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

,而不是

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

我认为这个问题是jQuery Mobile的负载,尽管来自不同的文件全部是到一个大的页面和导航所有页面的基础关闭到这个页面的不同点,这样当你第一次访问页面时,就会考虑创建页面,但是当点击后退按钮并从t他页面,页面仍然被认为是产生这样的情况下也不会再次触发,

我使用的是什么:

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

}); 

哪里#opplist是数据角色的页面的ID =“页面”我只是加载,不管这是否在第一次加载页面或之后发生,因为无论何时显示页面,都会触发事件。

Here foe jquery mobile events

而且在这里看到jquery mobile navigation

希望这有助于!

0

也许你应该尝试解除提交事件处理。一旦你回到之前的页面,再次启动它。多次添加事件处理程序可能会导致很多问题。

1

对于我来说,.trigger('create');总是工作,如果应用于该元素与data-role="page"

例如

HTML代码

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

JavaScript代码

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

希望它可以帮助