如何正确增强动态添加内容的 jQuery Mobile 标记？

jQuery Mobile：动态添加内容的标记增强

简介

标记增强是在 jQuery Mobile 页面中设置样式和启用交互功能的关键步骤。然而，当动态添加或修改内容时，它可能不会自动增强。有多种方法和注意事项需要注意，以确保正确的标记增强，具体取决于所需的增强级别。

标记增强级别

增强分为三个主要级别：

• 单个组件/小部件增强：增强单个小部件，例如按钮、列表视图、或复选框。
• 页面内容增强：增强当前页面内容区域内的所有内容。
• 全页面增强：增强整个页面，包括页眉、内容和页脚。

标记方法增强

单个组件/小部件增强

每个 jQuery Mobile 小部件都提供了一种动态增强它的方法：

• 按钮：$(' [type="button"]').button();
• 列表视图： $('#mylist').listview('refresh');
• 复选框/单选框：$('[type="radio"]').checkboxradio();
• 选择菜单: $('select').selectmenu();
• 注意：触发可折叠元素上的 ('create') 对于增强也是必要的。

页面内容增强

增强当前页面内容中的所有内容区域:

• $('#index').trigger('create');

整页增强

此方法官方并未推荐，但在极少数情况下可以使用情况：

• $('#index').trigger('pagecreate');

阻止标记增强

在某些情况下，它可能对于防止标记增强是必要的，例如自定义小部件或 CSS 样式。可以使用多种方法：

• 向容器添加 data-enhance="false" 属性。
• 向元素添加 data-role="none" 属性。
• 指定在初始化期间要忽略的特定元素$.mobile.page.prototype.options.keepNative.

标记增强功能疑难解答

错误：“无法在初始化之前调用 listview 上的方法”

在标记增强之前，确保小部件已初始化，例如：

• $('#mylist').listview().listview('refresh');

CSS 覆盖注意事项

要覆盖默认的 jQuery Mobile CSS 样式，请使用 !important 覆盖。示例：

• #navbar li { 背景：红色！重要； }

以上是如何正确增强动态添加内容的 jQuery Mobile 标记？的详细内容。更多信息请关注PHP中文网其他相关文章！