jQuery mobile无法刷新可折叠集合。

Question

我将使用jQuery mobile创建一个应用程序，并通过jsonp从wordpress加载其菜单和页面。 我以可折叠集和列表视图的形式加载它的菜单，但是我一直遇到错误。 当我尝试使用以下代码刷新可折叠集时：

$(".childnev").html(list);
$.mobile.loading( 'hide');
$('.popupmenu').slideToggle('slow');

$(".childnev").collapsibleset('refresh');

$(".childsublist").listview().listview('refresh');

我遇到了这个错误。

Error: cannot call methods on collapsibleset prior to initialization;
attempted to call method 'refresh'

当我尝试通过以下代码进行刷新时。

$(".childnev").html(list);
$.mobile.loading( 'hide');
$('.popupmenu').slideToggle('slow');

$(".childnev").collapsibleset();
$(".childnev").collapsibleset('refresh');

$(".childsublist").listview().listview('refresh');

它又给了我这个错误提示。

TypeError: o[0] is undefined

我有什么遗漏或做错了吗？

- Abhimanue Tamang

---

发布一个 JSFiddle。哪一行出现了 TypeError？同时请发布您的 HTML。 - dejavu

http://jsfiddle.net/jdZdG/3/ 准备就绪... - Abhimanue Tamang

你尝试按照答案中的建议进行更改了吗？ - dejavu

在这种情况下，您只需要在活动页面上调用它一次。一旦插入到DOM中，其余的动态页面将自动增强。因此，您不需要对它们进行进一步的增强。 - Omar

谢谢你，伙计。这段代码起作用了。$.mobile.activePage.collapsibleset().trigger('create'); - Abhimanue Tamang

Answer 1

你所需要做的就是添加这段代码：

演示

$('[data-role=collapsible-set]').collapsibleset().trigger('create');

这将增强当前页面（活动页面）中 [data-role=listview] 和 [data-role=collapsible-set] 的标记。您可以使用任何选择器替换 $('[data-role=collapsible-set]')。

---

注意事项

• 根据您在评论中的 fiddle，您犯了很多错误。在 jQuery Mobile 中不应使用 .ready。此外，.live 已不再使用，因此请将其替换为 .on。

• 增强方法 refresh、create、pagecreate 和 updatelayout 旨在用于当前页面（活动页面 - $.mobile.activePage）以重新应用 jQuery Mobile 样式。对于动态创建且已存在于 DOM 中的页面，没有必要使用任何增强方法 - 甚至不需要使用 .page() 或 pagecreate - 因为页面及其内容会在放入 DOM 后自动增强。

- Omar

---

我已经实现了您提供的解决方案，但它并没有起作用。您能否在jsfiddle.net/jdZdG/4上实现它，只是想知道我是否正确地实现了它。 - Abhimanue Tamang

@AbhimanueTamang 标记增强应该始终放在循环外面，放置在循环结束后的位置。 - Omar

请确保删除任何其他增强方法，例如listview()和collapsibleset()。只使用上述一个。@AbhimanueTamang - Omar

谢谢@Omar，你的解决方案在fiddle上运行良好，但在本地机器上，我动态创建了一些页面，当我删除它们时，它可以正常工作，但当我再次添加它们时，它开始出现相同的问题。你能猜测一下问题是什么吗？ - Abhimanue Tamang

谢谢你，Omar！你真是救了我一命。 - iSofia

Answer 2

由于您正在动态添加可折叠的se到其他类中，因此无法刷新它，因为它尚未创建。您需要创建它。

您需要使用：

$(".childnev").html(list).trigger('create');

- Subhash Sasidharakurup

Answer 3

折叠集尚未初始化。由于您正在替换HTML，因此需要在元素上触发create。

将$(".childnev").collapsibleset('refresh');替换为

$(".childnev").trigger('create');

刷新方法只用于动态添加、删除元素时使用。

- dejavu

---

$(".childnev").html(list).trigger('create'); - Subhash Sasidharakurup

@SubhashSasidharakurup 是的，你说得对。你也可以使用事件链，或者你可以单独调用该方法。 - dejavu

Answer 4

就我所知：我遇到了一个问题，我试图使用.html()更改现有可折叠div上的内容。无论如何都无法正确呈现。但是使用replaceWith()替换该div（同时复制其'id'），然后触发('create')效果很好。

- Papasmile