javascript - jQuery Mobile动态Div页面

我是JQuery + JQuery mobile的新手。

我正在尝试为样式创建动态div元素。我从AJAX调用中提取JSON，将其放入无序列表中，并将其包装到div中。 AJAX + JSON可以很好地工作，但是当我去在脚本中创建DIV并将其附加到另一个div容器中时，它将无法工作。我已经做了很多阅读，但是我发现的所有解决方案似乎都不适合div部分。

我将代码简化为以下内容：

HTML：

  <div data-role="page">
        <div data-role="header">
            <h1>Page Title</h1>
        </div><!-- /header -->

        <div id="someDiv" data-role="content"></div>
        <div id="anotherDiv"></div>
    </div>

JavaScript：

$(document).ready(function() {
    var newDiv = '<div id="d1"><p>This will attach to the content</p></div>';
    var aDiv = '<div id="test" data-role="page"><p>This never gets displayed because of data-role?</p></div>';
    $("#someDiv").html(newDiv).trigger('create');
    $("#anotherDiv").html(aDiv).trigger('create');
});​

请注意aDiv如何不附加到anotherDiv。我怀疑这与data-role="page"中的aDiv属性有关。

JSFiddle Link

我已经坚持了1天以上。任何帮助是极大的赞赏！！

最佳答案

实际上，您的aDiv是附加的，只是不显示（您可以在Firebug / WebInspector / DragonFly中检查您的标记并查看此内容），因为一次仅显示一个JQM页面。

如果要附加新页面，可以尝试将其添加到body

这是你的小提琴的叉子

http://jsfiddle.net/49LgB/