Question

所以......情景是这样的我有一个data-role =“page”的页面和一个标题容器和页脚div - 普通的jquery移动页面结构。

现在在我的内容div中我有两个div。在其中一个div中，我正在动态地加载一些其他内容，其中按钮和文本框都指定了数据角色。

现在出现了问题：

在div中加载新页面时，控件不会显示为移动控件，而是看起来像普通的html控件。这可能是因为他们在dom准备就绪后正在加载它们没有得到jqm js和css。

以下是页面结构。

     <html>
     <head>
     <link rel="stylesheet" href="styles/jquerymobile.css" type="text/css" />
     <script src="scripts/jquery.js"></script>
     <script src="scripts/jquery.mobile.js"></script>
     </head>
     <body>
     <div  data-role="page">
     <div data-role="header">
     </div>
     <div data-role="content">
     <div id="static_content"></div> // no problem to this.
     <div id="dynamic_content"></div> // dynamic content used .load() - no jqm css loaded :(
     </div>  
     </div>
     </body>
     </html>

任何帮助将不胜感激。

Answer 1

您必须将内容加载到jQuery移动事件结构中。详情请见此处： http://jquerymobile.com/demos/1.1.0/docs/api/events.html

我使用'pagecreate'事件在jquery增强之前修改内容，如下所示：

  obj_out.add "$('div').live('pagecreate',function(event){" & vbNewLine
  obj_out.add " $('.jsvisible').show();" & vbNewline
  obj_out.add " $('.jshidden').hide();" & vbNewline
  obj_out.add " $('.nojs').removeClass('nojs');" & vbNewline
  obj_out.add "});" & vbNewline

Answer 2

您可以在加载动态内容后调用页面窗口小部件构造函数

 $("div[data-role='page']").page('destroy').page();

jQuery mobile css和js没有应用于.load（）加载的内容

2 个答案: