JQuery Mobile trigger('create') command not working

Question

JQuery Mobile is making my cry tonight. I\'m trying to build custom controls so I don\'t repeat certain elements through my app, and it\'s giving me a hard time. Specifica

Answer 1

Calling:

trigger('pagecreate');

immediately after:

trigger('create');

works for me.

Answer 2

this question is old enough by now, but I just ran into the problem so here is how I handled it -- (this maintains the set data-theme and applies the correct roles for the containing divs and headers)

$('your_selector').find('div[data-role="header"], div[data-role="footer"]').each(
    function( ){
        var dR = $(this).attr('data-role');
        var dT = $(this).attr('data-theme');
        $(this).addClass('ui-' + dR + ' ui-bar-' + dT).attr('role', (dR == 'header' ? 'banner' : 'contentinfo') ).children('h1, h2, h3, h4').each(
            function( ){
                $(this).addClass('ui-title').attr({'role':'heading', 'aria-level':'1'});
            }
        )
    }
);

depending on your code, it might be more convenient to set this up as a function and send your selector as an argument. Hope it helps.

Answer 3

When changing header, footer or content, you can trigger pagecreate on the page:

$('#me-header').closest(":jqmData(role='page')").trigger('pagecreate');

This is a jQM bug: https://github.com/jquery/jquery-mobile/issues/2703. According to a comment in the issue report, calling pagecreate multiple times may cause problems though, as elaborated in https://github.com/jquery/jquery-mobile/issues/2703#issuecomment-4677293.

Answer 4

I believe I've found the 'best' answer available. In short, the 'header' and 'footer' type data-role elements are not standard widgets. They are some sort of hybrid construct. I found this out by just going through the source code of JQueryMobile. They don't have a 'create' method, so it can't be called.

My workaround was to just apply the classes directly to my code, instead of expecting the widget to do it for me. Not ideal, but it works well enough.