CODEWITHSUNDEEP
javascriptjquerycordovajquery-mobilejquery-events
Code Bunny
Code Bunny

Reputation: 447

jQuery Mobile collapsible 'expand' event not firing in Cordova app

I have a Cordova app built using jQuery Mobile version 1.4.5

In this app there is a page in which there are 4 collapsibles with multiple collapsibles in them.

I need to trigger a piece of code each time on of the nested collapsibles are expanded. To this end I used a CSS class and bound an expand event listener for these collapsibles.

When I make a jsFiddle out of it works but on the app it doesn't run and doesn't stop at the breakpoint (using chrome remote debug), there are also no errors of any kind.

My Javascript looks like this:

    $( ".msg_head" ).on( "collapsibleexpand", function( event, ui ) {
        alert('expand');
    } );

The fiddle can be viewed here: fiddle

Upvotes: 0

Views: 129

Answers (2)

ezanker
ezanker

Reputation: 24738

jcarrera's answer will work (event delegation). But the problem form a jQuery Mobile point of view is that you are NOT creating the handler within the jQM pagecreate event. So the collapsible does not yet exist. Use the pagecreate for the page that contains the collapsibles like this:

$(document).on("pagecreate","#your-page-id", function(){ 
  $( ".msg_head" ).on( "collapsibleexpand",  function( event, ui ) {
    alert('expand');
  } );
});

Updated FIDDLE

Upvotes: 1

jcarrera
jcarrera

Reputation: 1068

I have updated the fiddle with a working solution using this js code:

$(document).on( "collapsibleexpand", ".msg_head",function( event, ui ) {
    alert('expand');
} );

Upvotes: 1

Related Questions