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

Posted 2023-05-09

【中文标题】Ajax 添加的 HTML 不继承页面样式 - jQueryMobile

【英文标题】：Ajax added HTML doesn't inherit page styles - jQueryMobile

【发布时间】：2012-02-24 02:52:33

【问题描述】：

所以我对 jQueryMobile 还很陌生，但我设法创建了一个搜索栏，在您使用 Ajax 输入时显示结果，这工作得很好，但问题是 CSS 样式没有应用于 ajax 'd 内容。

有没有一种方法可以强制 CSS 刷新或重新缓存，或者只是让 CSS 应用于新的 ajax html？

【问题讨论】：

我很确定 AJAX 添加的内容仍应设置样式。您能否添加相关的 CSS/HTML/JQuery，以便我们更详细地查看它。

【参考方案1】：

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

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

例如，如果加载了一个 HTML 标记块（比如登录表单） 在通过Ajax，触发create事件自动变换 它包含的所有小部件（在这种情况下为输入和按钮）到 增强版本。这个场景的代码是：

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

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

例如，如果您有一个页面，其中动态附加了一个新的 页面后带有data-role=listview 属性的无序列表 创建，在该列表的父元素上触发创建将 将其转换为列表视图样式的小部件。如果有更多列表项 然后以编程方式添加，调用列表视图的刷新方法 只会将那些新列表项更新为增强状态并离开 现有的列表项保持不变。

jQM 文档在这里：

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

刷新表单元素在 jQuery Mobile 中，一些增强的表单控件是简单的样式（输入），但其他的是自定义的 控件（选择、滑块）构建自并保持同步， 本机控制。以编程方式更新表单控件 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

【讨论】：

找到解决方案：$('#search_preview ul').listview();