jQuery mobile css 和 js 不适用于使用 .load() 加载的内容答案

【问题标题】：jQuery mobile css and js not applied to the content loaded with .load()jQuery mobile css 和 js 不适用于使用 .load() 加载的内容
【发布时间】：2012-06-04 06:37:16
【问题描述】：

所以..这里是场景
我有一个带有 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>

我们将不胜感激。

【问题讨论】：

标签： javascript css jquery-mobile

【解决方案1】：

您必须将内容加载放入 jQuery 移动事件结构中。有关详细信息，请参见此处： http://jquerymobile.com/demos/1.1.0/docs/api/events.html

在jquery增强之前，我使用'pagecreate'事件来修改内容，像这样：

  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

【讨论】：

【解决方案2】：

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

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

【讨论】：

抱歉，我忘了包含页面销毁命令。它已被编辑。
嘿@Alex，刚刚跟进，那个 .page('destroy').page() 对你有用吗？
对不起 json 它没有。同时我想出了新的方法。我使用 $.get 方法代替 .load() 并使用 trigger('create') 代替 .page()。