javascript - 动态内容更改后 jQM 1.4.2 可折叠集无法正确刷新

Question

我知道之前有人问过这个问题，我已经阅读了所有的解决方案。它们都不起作用。

我有一个可折叠的集合，其中包含 5 个可折叠的元素。

<div data-role="collapsibleset" id="mySet" data-inset="false" class="ui-nodisc-icon ui-alt-icon">
  <div data-role="collapsible" id="1">
  </div>
  <div data-role="collapsible" id="2">
  </div>
  <div data-role="collapsible" id="3" >
  </div>
  <div data-role="collapsible" id="4">
  </div>
  <div data-role="collapsible" id="5">
  </div>
</div>

组件是用 jQuery 构建的，每个组件的 html 都更新了。

$('#' + key).html(myHTMLString);

其中关键是 div 的 id，myHTMLString 是在 jQuery 中构造的。

这在您第一次访问该页面时效果很好，但之后可折叠集会丢失所有格式。第一次访问时，可折叠标题周围没有 anchor ，也没有带有 class="ui-collapsible-content ui-body-inherit"的 div。

我试过所有的组合

$('#mySet').collapsibleset().trigger('create');
$("#mySet").collapsibleset("refresh");
$( "#mySet" ).trigger( "updatelayout" );
$("#mySet").enhanceWithin();

还有更多我能找到的。没有任何改变。

有什么想法吗？如果它根本不起作用但在第一次访问时还好但下一次就不行了，我就不会那么困惑了？奇怪。

编辑:

我修改了代码，使 h4 和 p 标签位于 html 文档中，而不是动态插入，并且我正在向它们添加数据，如下所示:

 $('#' + key + "_head").html(myHeadingHTMLString);
 $('#' + key + "_content").html(myContentHTMLString);

这已经恢复了可折叠的 div 但它仍然取消了格式，因为在第二次访问时(它仍然在第一次工作正常)带有

的 anchor 标记

<a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-left ui-icon-plus ui-btn-inherit"> 

不会在第二次访问时添加。

为什么不呢？我在构建所有内容的最后使用 .collapsibleset()，无论我做什么都一样。

Answer 1

尝试:

$("#mySet").enhanceWithin().collapsibleset('refresh');