持续更新与适当的jQuery Mobile的页面风格(Consistently update pag

我有我想查看它们的更多细节，当我点击它的项目列表。 这些项目的信息不可用，我需要做一个API请求，以获得必要的数据，然后我在一个jQuery模板渲染。

然后，将模板添加到一个jQuery Mobile的页面。

下面是一些有问题的代码，我使用的尝试和更新我的网页

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 id="productDetails" data-role="page">
</div>

<!-- Product Item Details Template -->
<script id="productDetailsTmpl" type="text/x-jquery-tmpl">
    <div data-role="header">
        <h1>${title}</h1>
    </div>

    <div data-role="content">
        <h1>Properties</h1>
        <p>${product_type}</p>
        <p>${vendor}</p>
    </div>
</script>

下面是详细信息页面，当我第一次点击一个项目的截图：

详细信息页工作

详细信息页面无法正常工作

Answer 1:

我认为你需要告诉页面刷新围绕自身的第二次。 第一次创作的一切，然后不围绕去重新造型本身。 我有一个类似的问题在列表视图动态创建LIS。

尝试：

productDetailsPage.page("refresh",true);

不知道这是否会工作的第一次，但应为第二:)

文章来源: Consistently update page with appropriate jQuery Mobile styles