更新 DIV 在 JQuery Mobile 中的 Collapsible 中仅当 Collapsible 打开时（例如按需加载）

Question

我正在尝试执行对外部程序的调用，以在 JQuery Mobile 中的可折叠内容中的 DIV 中创建内容，以便在运行 div 中的 JQM 可折叠项在打开可折叠项时出现。我正在尝试使用 jquery.appear 插件 (https://github.com/morr/jquery.appear)，如下所示：

<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>

我显然遗漏了一些东西，因为 div 在打开可折叠项时没有更新。在这种情况下会出现工作吗？或者是否有更有效的方法来实现 "on demand" 加载可折叠内容？

Answer 1

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

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

...顺便说一下：最好避免让 ID 以数字开头（即使在 HTML5 中允许）。

更新 DIV 在 JQuery Mobile 中的 Collapsible 中仅当 Collapsible 打开时（例如按需加载）

Updating a DIV inside a Collapsible in JQuery Mobile only when the Collapsible is opened (eg. load on demand)

html

external

jquery-mobile

jquery-mobile-collapsible