1

外部プログラムへの呼び出しを実行して、JQuery Mobile の折りたたみ可能な DIV 内にコンテンツを作成し、折りたたみ可能な JQM 折りたたみ可能な div が開いたときに表示されるときにコードを実行しようとしています。次のように 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 が更新されないため、明らかに何かが欠けています。この場合、動作するように見えますか? または、折りたたみ可能なコンテンツのこの「オンデマンド」読み込みを実現するためのより効果的な方法はありますか?

4

1 に答える 1

1

プラグインは必要ありません。折りたたみ可能で展開イベントを使用するだけです。

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

...ちなみに、数字で始まる ID を使用しないようにすることをお勧めします (HTML5 で許可されている場合でも)。

于 2015-06-18T07:09:09.870 に答える