使用jquery mobile加载div

Question

我在加载内容时遇到问题

$('#next').click(function(){
        $('#boundary').load('options.html #pagecontent').page();


    });

问题是#pagecontent div驻留在options.html加载中，而不是预期的jquery移动元素中。

如果预览该页面，则带有id=page的in options.html内容可以很好地呈现。只有当我加载并尝试将其加载到另一个带有id=“边界”的页面div中时，所有的jquery移动呈现才会失败，而元素只是作为原生html元素加载。

在options.html中:一个包含一些ui元素的标准div。

<div id="pagecontent">
     // Jquery mobile button 
      <a href="results.php" data-transition="fade" id="result" data-role="button" data-theme="e" rel="external">View results</a>
</div>

谢谢

Answer 1

这只是一个猜测，但是如果jQuery移动在用户点击页面链接时默认这样做，那么为什么还要编写代码从html文件加载页面div呢？

如果不是为了加载在添加到页面之前需要分析和更改的数据，我建议不要编写自己的AJAX支持。

Answer 2

尝试添加.page()

$('#boundary').load('options.html#pagecontent').page();

可能附加到点击功能

$('#next').click(function(){
    $('#boundary').load('options.html#pagecontent');
}).page();

Answer 3

我遇到了类似的问题，并找到了一个解决方案来强制jquery移动呈现已加载的div。我知道这个答案对你来说来得太晚了，但也许它会对其他有类似问题的人有所帮助：

$('#next').click(function(){
    $('#boundary').load('options.html #pagecontent');
    $('#boundary').trigger("pagecreate").trigger("refresh");
});

这适用于我使用jquery mobile 1.1.0 (我没有使用旧版本进行测试)