1

次のように、折りたたみ可能なコンテンツを動的に生成します。

$('#'+object.TARGET).html(response).trigger('create');

折りたたみ式は非常にうまく機能します

<div data-role="collapsible" id="ims-page-start-content-detail-vertrag">
    <h2>Mieter</h2>
    <p></p>
</div>

ただし、expand-event を次のように使用する場合:

$("#ims-page-start-content-detail-vertrag").on( "collapsibleexpand", function( event, ui ) { alert("test"); } );

また

$("#ims-page-start-content-detail-vertrag").collapsible({
    expand: function( event, ui ) { alert("test"); }
});

答えはありません！私たちは何を間違っていますか？たくさんの戦車;-)

これを追加します：

$(document).off('pageshow','#ims-page-start').on('pageshow','#ims-page-start',function(){

$('#ims-page-start-content-detail-vertrag').bind('expand', function () {    alert('Expanded');
   }).bind('collapse', function () {
   alert('Collapsed');
    });

});

しかし、これはまだ機能していません! 問題は、折りたたみ可能なものを動的に生成する方法だと思います

4

1 に答える 1

5

動的に作成された折りたたみ可能オブジェクトをリッスンcollapsibecollapseしてcollpsibleexpandイベントする 2 つのソリューションがあります。

  1. 最初の簡単な方法は、イベントを委任することです。

    $(document).on("collapsibleexpand collapsiblecollapse", "[data-role=collapsible]", function (e) {
  /* do something */
});

    デモ

  2. 2 番目の解決策は、イベントを動的に作成している間にイベントをバインドすることです。

    $(document).on("pagecreate", "#pageID", function () {
  $("parentDiv")
    .append($('<div data-role="collapsible"><h3>Dynamic</h3><p>Content</p></div>')
    .collapsible({
    expand: function () {
        /* Expanded - do something */
    },
    collapse: function () {
        /* Collapsed - do something */
    }
  }));
});

    デモ

于 2014-03-20T12:50:50.770 に答える