使用适当的jQuery Mobile样式一致地更新页面

我有一个项目列表，当我点击它时，我想查看它们的更多细节。 这些项目的信息不可用，我需要发出API请求以获取必要的数据，然后我在jquery模板中呈现这些数据。

然后将模板添加到jquery移动页面。

以下是我用来尝试更新页面的一些代码

function updateProductDetails(data){ var productDetailsData = data['product'] var productDetailsPage = $("#productDetails") var templateData = $("#productDetailsTmpl").tmpl(productDetailsData); productDetailsPage.html(templateData); //ISSUE IS HERE -- The following works when I load a template // for the first time, after that it doesn't work as expected. productDetailsPage.page(); $.mobile.changePage("#productDetails"); } function loadProductDetails(productId){ $.mobile.pageLoading(); $.ajax({ url: '/admin/products/'+productId+".json", success: function(data, status, xhr){ updateProductDetails(data); $.mobile.pageLoading(true); }, dataType: 'json' }); } $("#productItem").live('click', function(event){ var productId = $(this).children("#productId")[0].innerHTML; loadProductDetails(productId); }); 

以下是我用于产品详细信息的div以及用于填充该div的模板

 
 
   
 
${title}
 
 
 
Properties
 
${product_type}
 
${vendor}
 
  

这是我第一次点击某个项目时的详细信息页面的屏幕截图：

详情页工作

详细信息页面不起作用

Answer 1

我想你需要告诉页面第二次刷新自己。 它第一次创造了一切，然后不再重新塑造自己。 我有一个类似的问题，在列表视图中动态创建LI。

尝试：

 productDetailsPage.page("refresh",true); 

不确定这是否会在第一次工作，但应该是第二次:)