Question

我们动态生成可折叠内容：

$('#'+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');
    });

});

但这仍然无效！我们认为问题是如何动态生成可折叠的

Answer 1

您有两种解决方案可以在动态创建的可折叠内容上收听collapsibecollapse和collpsibleexpand个事件。

第一个也是直接的委托事件。

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

<强> Demo

第二个解决方案是绑定事件，同时创建动态。

$(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 */
    }
  }));
});

<强> Demo

JQM 1.4.2可折叠事件扩展不起作用

1 个答案: