Jquery mobile 动态添加页面时，Jquery mobile未应用样式

嗨，我有一个使用JQM和Sammy的小应用程序。我使用Sammy动态加载页面，并将其附加到index.html的主体中。问题是我看不到JQM主题得到应用，控制台中也没有错误

有什么原因吗。我称之为

 context.render('view/abc.template')
                .appendTo(context.$element(),function(){
                    $(document).ready(function () {
                        $("#container").trigger('pagecreate');
                    });
                });

谢谢

我就是这样做的

1） 首先，我在一个名为plugins.js的文件中禁用了JQM路由

$(document).bind("mobileinit", function() {
    /**
    * check out http://coenraets.org/blog/2012/03/using-backbone-js-with-jquery-mobile/  for more details
    */
   $.mobile.ajaxEnabled = false;
   $.mobile.linkBindingEnabled = false;
   $.mobile.hashListeningEnabled = false;
   $.mobile.pushStateEnabled = false;
}); 

这段代码是在我加载JQM之前加载的，就像这样

    <script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="js/plugins.js"></script>
    <script src="//code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
    <script src="js/vendor/sammy/sammy.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/vendor/sammy/plugins/sammy.template.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/main.js"></script>

我认为您对上面的代码片段了解不多。注意，您有$（document）.ready函数作为对appendTo的回调，它不接受回调。你会看到我的正在加载（），这就是我如何做到的

1） 首先，我在一个名为plugins.js的文件中禁用了JQM路由

$(document).bind("mobileinit", function() {
    /**
    * check out http://coenraets.org/blog/2012/03/using-backbone-js-with-jquery-mobile/  for more details
    */
   $.mobile.ajaxEnabled = false;
   $.mobile.linkBindingEnabled = false;
   $.mobile.hashListeningEnabled = false;
   $.mobile.pushStateEnabled = false;
}); 

这段代码是在我加载JQM之前加载的，就像这样

    <script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="js/plugins.js"></script>
    <script src="//code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
    <script src="js/vendor/sammy/sammy.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/vendor/sammy/plugins/sammy.template.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/main.js"></script>

---

我认为您对上面的代码片段了解不多。注意，您有$（document）.ready函数作为对appendTo的回调，它不接受回调。你会看到我的是load（），它不会删除

。ready

它不是为jQM设计的。一旦将页面附加到DOM中，它们将在显示之前得到增强。检查这个例子多亏了Omar，我做了更改，现在我可以看到JQM样式被应用于第一个模板，但是当我移动到下一个页面时，它又是一个模板，并且使用sammy呈现，样式没有被呈现。知道原因是什么吗？尝试添加

$（'[data role=page'）.page（）；

或

$（'[data role=page'）.trigger（'pagecreate'）；

我在将模板附加到dom后添加了它，但没有成功。JQM样式仍然没有得到应用。下面是代码this.get（'./item'，函数（上下文）{context.app.swap（“”）；context.render（'view/page2.template'）。appendTo（context.$element（），function（）{/$（document）.ready（function（）{/$（“#page2”）。trigger（'pagecreate'）；//}）；$（'[data role=“page”]））.page（）；}）；在哪里追加页面？请尝试

$.mobile.pageContainer.append（'您的数据'）

remove

.ready

它不是为jQM设计的。一旦将页面附加到DOM中，它们在显示之前会得到增强。检查此示例多亏了Omar，我做了更改，现在我可以看到jQM样式应用于第一个模板，但当我移动到下一个页面时，它又是一个模板，并使用sammy t呈现样式没有得到渲染。知道原因是什么吗？尝试添加

$（'[data role=page'）.page（）；

或

$（'[data role=page'）。触发器（'pagecreate'）；

我在将模板附加到dom后添加了它，但没有成功。JQM样式仍然没有得到应用。下面是代码供您参考（'#/item'，函数（context）{context.app.swap（''）；context.render（'view/page2.template'）。appendTo（context.$element（），function（）{/$（document）.ready（函数（）{/$（“#page2”）。触发器（'pagecreate'）；/}）；$（'[data role=“page”]'）.page（）；}）；在哪里追加页面？请尝试

$.mobile.pageContainer.append（'您的数据'）

谢谢Paul。我可以请你分享你的index.html和模板吗？我收到一个错误Uncaught TypeError：无法用相同的代码读取未定义的属性“options”。不确定原因是什么。登录模板在这里，我只想与你分享该项目，但它是为一个客户提供的，需要考虑一个问题：你是否加载了如上所述加载sammy.template插件？感谢Paul的回复，我现在可以加载模板了，但有两个问题。第一个问题是页面转换不平稳，即使我在第二页添加了页面转换幻灯片，当我回到第一页时，我看到了两个页面的内容，因为如果你看到代码，如果是第一页，我们实际上是在添加而不是替换。您是否遇到过类似的问题？Jquery mobile是否有一些内置设置来实现这一点Hi-Paul，为迟来的响应表示歉意。我确实尝试了tat，但效果很好。非常感谢。现在我正在尝试以不同的方式加载模板。现在，我们已经在index.h中定义了data role=pagetml和动态加载内容。是否可以将index.html保留为空（仅为head和body标记），并将模板设置为realpage。我之所以尝试此操作，是因为我需要在页面更改时触发一些事件，但我没有看到“pagecreate”事件被触发，因为页面已经创建。再次感谢您的输入。谢谢Paul。我能请您共享您的index.html和模板吗？我收到一个错误Uncaught TypeError:无法使用相同的代码读取未定义的属性“options”不确定原因是什么。登录模板在这里，我将只共享该项目与你一起，但这是为一个客户和一个想法：你加载sammy.template插件如上所述吗？感谢Paul的回复，我现在能够加载模板有两个问题。第一个问题是页面转换不平稳，即使我已经添加了页面转换幻灯片，当我回到fi时，从第二页开始的下一个页面第一页我看到了这两个页面的内容，因为如果你看到了代码，我们实际上是在添加而不是替换第一个页面。你遇到过类似的问题吗？Jquery mobile是否有一些内置的设置来实现这一点Hi Paul，为迟来的响应道歉。我尝试了tat，它成功了。非常感谢。现在我正在尝试加载模板现在我们已经在index.html中定义了data role=page并动态加载内容。是否可以将index.html保留为空