仅在打开可折叠对象时更新 JQuery Mobile 中可折叠对象内的 DIV(例如按需加载)

Question

我正在尝试执行对外部程序的调用，以在JQuery Mobile的可折叠对象内的DIV中创建内容，以便在打开可折叠对象时出现JQM可折叠对象中的div时运行一些代码。我正在尝试使用 jquery.look 插件 （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 没有更新。在这种情况下会出现工作吗？还是有更有效的方法来实现这种"按需"加载可折叠内容的方法？

Answer 1

你不需要任何插件，只需使用可折叠对象上的 expand 事件：

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

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