已添加Ajax HTML不会继承页面样式 - jQueryMobile

Question

所以我对jQueryMobile相当新，但是我设法创建了一个搜索栏，可以在使用Ajax进行输入时显示结果，这很好，但问题是该CSS样式不适用于ajax'd内容。

有没有一种方法可以强制CSS来刷新或重新缓存或只是将CSS应用于新的ajax'd html？

Answer 1

加强新的标记
页面插件调度pagecreate事件，其中大部分部件使用自动初始化自己。只要引用了小部件插件脚本，就会自动增强 在页面上找到的小部件的任何实例。

但是，如果通过 的Ajax生成的内容的新标记的客户端或负载，并将其注入到一个页面，你可以触发创建事件 处理自动初始化包含在 新的所有插件标记。这可以在任何元素上触发（即使是div本身），为您节省了手动初始化每个插件 （列表视图按钮，选择等）的任务。

例如，如果HTML标记（比如登录表单）的块是在通过Ajax加载 ，触发创建事件来自动变换 所有它包含（这种情况下的输入和按钮）的微件进入 增强版本。此方案的代码将是：

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

创建与刷新：一个重要的区别
注意，还有就是创建事件和刷新方法 一些部件之间有一个重要的区别。创建事件适用于增强包含一个或多个小部件的原始 标记。刷新方法应为 用于编程操作 的现有（已增强）小部件，并且需要更新UI以匹配。

举例来说，如果你有一个页面，您可以动态追加新的 无序列表data-role=listview属性 页面创建后，触发创建列表的父元素将 将其转化为一个ListView控件样式。如果更多列表项是 ，然后以编程方式添加，调用列表视图的刷新方法 会将这些新列表项更新为增强状态，并保留 未更改的现有列表项。

JQM文档这里：

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

刷新表单元素
在jQuery的移动，一些增强表单控件风格简单的（输入），但其它的自定义 控制（选择，滑块）从本地连接构建并与其保持同步 本地连接列伊。要以编程方式更新带有JavaScript的表单控件，请首先操作本机控件，然后使用刷新方法告诉增强型控件自行更新以匹配新的 状态。下面是关于如何更新公共表单控件的一些例子， 然后调用刷新方法：

复选框：

$("input[type='checkbox']").prop("checked",true).checkboxradio("refresh"); 

收音机：

$("input[type='radio']").prop("checked",true).checkboxradio("refresh"); 

选择：

var myselect = $("#selectfoo"); 
myselect[0].selectedIndex = 3; 
myselect.selectmenu("refresh"); 

滑条：

个

$("input[type='range']").val(60).slider("refresh"); 

翻转开关（他们使用滑块）：

var myswitch = $("#selectbar"); 
myswitch[0].selectedIndex = 1; 
myswitch.slider("refresh"); 

JQM文件的位置：

• http://jquerymobile.com/demos/1.0.1/docs/forms/docs-forms.html