Solution
Working example: http://jsfiddle.net/Gajotres/3pCQh/
As you have notices proper way to detect collapsible state is to use collapse and expand event (information provided in official documentation is wrong). Also when binding events in jQuery Mobile
, specially with dynamically created objects it is important to use delegated binding, like this:
$(document).on( "collapse", "#test-collapsible", function( event, ui ){
alert('Close');
});
$(document).on( "expand", "#test-collapsible", function( event, ui ){
alert('Open');
});
This example doesn't care if object exist or don't exist. Event is going to be bound to document object and it will propagate to the correct destination only if/when object becomes available inside the DOM
.
Few notes
If you use correct page event (like pageinit
) you don't need to use off
to unbind an event. Pageinit
will trigger only once, just like document ready when used with classic jQuery.
There's one more thing. If you are using several HTML
pages you need to be careful with your javascript. When jQuery Mobile loads additional HTML
pages it loads only BODY
content so everything inside a HEAD
will be discarded. This could also be the reason why your code example is not executing. Solutions to this problem can be fond HERE.