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

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事件.

1. 第一个也是直截了当的是委托事件.

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

   演示

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

   演示