带有嵌套 Listview 的 jQuery Mobile Collapsible 无法正确显示

标签 jquery css html jquery-mobile

我是 jQueryMobile 的新手,遇到了一个我无法单独解决的问题。

我有一个 HTML 表单,它非常大(约 100 个字段)。为了提高可用性,该表单分为 4 个部分,分别位于 4 个 JQM 页面上。在每个页面上,我都有相同的菜单和一个显示用户的可折叠集。如果您点击一个用户,您可以看到每个用户的报告(这是 ListView )。

$(document).ready - 事件中,我正在调用 load_users 函数以从数据库中检索所有用户及其报告。使用这些数据,我建立了可折叠 View 和 ListView ,最后我调用 $(".listview:visible").listview().listview("refresh"); $(".menu:visible").collapsibleset("refresh"); 正确显示可折叠和 ListView 。因为菜单是同时构建在所有四个页面上的,所以我必须添加 :visible-pseudoclass。

当我向数据库中插入一个新用户时,问题就出现了。插入工作正常。之后,我从菜单中删除所有元素并再次调用 load_users() 以再次填充菜单。但之前有效的方法是在一个没有预期样式的普通列表中结束。

任何人都可以提示我如何让 JQM 使我的可折叠和 ListView 正确显示吗?

最佳答案

当您在 jQuery Mobile 中手动添加 html 时,您需要告诉它重新执行在页面创建期间完成的增强功能。

要做到这一点,调用 .listview() 构造函数,它将重新创建小部件,而不是 .listview('refresh') ,它只会刷新。还要确保在重新创建任何标记时添加数据 Angular 色属性。

最后不要使用 $(document).ready 它会导致 JQM 导航出现问题,而是使用 $('#mypageid').on('pageinit', function(){});

http://api.jquerymobile.com/category/events/

关于带有嵌套 Listview 的 jQuery Mobile Collapsible 无法正确显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18210132/

相关文章:

javascript - 单击其中一个时在两个 A HREF 之间切换可见性?

javascript - 如何在 React 中悬停时转换背景图像

jquery - toastr 没有出现在laravel中

html - 使 blockquote 适应图像高度并添加程式化的引用

html - flex 盒布局 : shrink and grow at the same time

javascript - 检索一个数组中所有输入的值 - Jquery

jquery - 如何创建动态表?

html - 空白 : nowrap not working

javascript - JQuery 如何在鼠标超出控制区域时继续检测文本区域调整大小

javascript - 尝试根据时间是过去、当前还是 future 来更改背景颜色