为什么用.ajax()加载的元素没有展示jQuery Mobile CSS？

Question

我在jQuery Mobile上创建了一个网站.我通过jQuery $.ajax()函数加载了一些HTML内容.

加载的代码包含按钮和可扩展部分等功能.

但是,没有任何加载的元素具有移动功能.jQuery Mobile CSS没有应用于它们.

这是否与jQuery Mobile如何使用Ajax在页面中导航有关？未动态加载的HTML内容确实保留了jQuery Mobile样式.

Answer 1

您需要刷新新元素的jQM控件:

• http://jquerymobile.com/demos/1.0.1/docs/pages/page-scripting.html

增强新标记
页面插件调度pagecreate事件,大多数小部件都使用它来自动初始化自己.只要引用了一个小部件插件脚本,它就会自动增强它在页面上找到的小部件的任何实例.

但是,如果您通过Ajax生成新标记客户端或加载内容并将其注入页面,则可以触发create事件来处理新标记中包含的所有插件的自动初始化.这可以在任何元素(甚至页面div本身)上触发,从而节省了手动初始化每个插件(listview按钮,选择等)的任务.

例如,如果通过Ajax加载了一个HTML标记块(比如一个登录表单),则触发create事件以自动将它包含的所有小部件(在这种情况下为输入和按钮)转换为增强版本.此方案的代码为:

$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );

创建与刷新:重要区别
请注意,某些小部件具有的创建事件和刷新方法之间存在重要差异.create事件适用于增强包含一个或多个小部件的原始标记.刷新方法应该用于已经以编程方式操作的现有(已经增强的)小部件,并且需要更新UI以匹配.

例如,如果您有一个页面,您在页面创建后动态添加了一个带有data-role = listview属性的新的无序列表,则在该列表的父元素上触发create会将其转换为listview样式的小部件.如果以编程方式添加更多列表项,则调用listview的refresh方法会将这些新列表项更新为增强状态,并保持现有列表项不变.