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

   演示