Html 仅当可折叠文件打开时，才在JQuery Mobile中更新可折叠文件中的DIV（例如按需加载）

我试图执行对外部程序的调用，以在JQuery Mobile中的可折叠文件中的DIV中创建内容，并在打开可折叠文件时出现JQM可折叠文件中的DIV时运行一些代码。我正在尝试使用jquery.appeage插件（），如下所示：

<div id="coll2" data-role="collapsible" data-mini="true" data-inset="false" data-iconpos="right">
  <h1>Collapsible 1</h1>
  Collapsible Title! 
  <div id="2wrapper"></div>
</div>

<script type="text/javascript">

$(document.body).on('appear', '#2wrapper', function() {
  // this element is now inside browser viewport

    alert("Script running");
    $("#2wrapper").load('some-external-program-content.cgi');

});

</script>

可折叠1
可折叠标题！
$（document.body）.on（'出现'，'包装器'，函数（））{
//此元素现在位于浏览器视口中
警报（“脚本运行”）；
$（“#2wrapper”）.load（'some-external-program-content.cgi'）；
});

---

我显然遗漏了一些东西，因为打开可折叠文件时div没有更新。在这种情况下会出现工作吗？或者有没有更有效的方法来实现在可折叠文件中“按需”加载内容？

您不需要任何插件，只需使用可折叠文件上的事件：

$(document).on("collapsibleexpand", "#coll2", function(event, ui)
{
    $("#2wrapper").load('some-external-program-content.cgi');
});

---

…顺便说一下：避免ID以数字开头是一个很好的做法（即使HTML5允许这样做）。

谢谢！是的，我同时在上找到了一个类似的答案，并使用expand事件使其工作。也非常感谢您的回复。还感谢您对领先数字不理想的指导。干杯