CODEWITHSUNDEEP
jquery-mobilejquery-mobile-collapsible
Dirk Kolbe
Dirk Kolbe

Reputation: 59

JQM 1.4.2 collapsible event expand dont work

We generate a collapsible content dynamically like this:

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

The collapsible work very well 

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

but if we want to use the expand-event with:

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

or

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

there is no answere! what we do wrong? Tanks a lot ;-)

we add this:

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

});

but this still not working! we think the problem is how to generate the collapible dynamically

Upvotes: 1

Views: 1265

Answers (1)

Omar
Omar

Reputation: 31732

You have two solutions to listen collapsibecollapse and collpsibleexpand events on dynamically created collapsibles.

  1. The first and straight-forward one is to delegate event.

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

    Demo

  2. The second solution is to bind event while you are creating them dynamically.

    $(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

Upvotes: 5

Related Questions