JQM (jQueryMobile) Dynamically added elements not displaying correctly and CSS is not applied

I'm having an issue with adding a select tag dynamically, the CSS and additional html tags (that JQM add) are is not being applied.

Here is an example of how I'm adding the new select tag: http://jsfiddle.net/UcrD8/4/

The HTML:

<div data-role="page" id="page_1">
    <div id="select_option_groups">
        <div data-role="fieldcontain">
            <select name="select_options_1">
                <option value="" selected>Please select an option</option>
                <option value="foo">Foo</option>
                <option value="bar">Bar</option>
            </select>
        </div>
    </div>
</div>

The JS:

$(function(){
    var counter = 2;
    var onChange = function(e){
        val = $(':selected',this).val() || '';
        if (val != ''){
            // they may be able to toggle between valid options, too.
            // let's avoid that using a class we can apply
            var c = 'alreadyMadeASelection';
            if ($(this).hasClass(c))
                return;
            // now take the current select and clone it, then rename it
            var newSelect = $(this)
                .clone()
                .attr('name','select_options_'+counter)
                .attr('id','select_options_'+counter)
                .appendTo('#select_option_groups')
                .change(onChange);
            $(this).addClass(c);
            count开发者_Python百科er++;
        } else {
            var id = $(this).attr('name').match(/\d+$/), parent = $(this).parent();
            $(this).remove();

            // re-order the counter (we don't want missing numbers in the middle)
            $('select',parent).each(function(){
                var iid = $(this).attr('name').match(/\d+$/);
                if (iid>id)
                    $(this).attr('name','select_options_'+(iid-1));
            });
            counter--;
        }
    };
    $('#select_option_groups select').change(onChange);
});

I've tried:

// this gets the select tags to stack but still no CSS
$(newSelect).fieldcontain('refresh'); 

// does nothing
$(newSelect).page();

// does nothing
$('#page_1').page();

Try this:

$(newSelect).selectmenu('refresh');

or this which will force the rebuild of it:

$(newSelect).selectmenu('refresh', true);

and please let me know if it worked.

I have no idea why .selectmenu('refresh'); doesn't work, but as for page - you can use it once on an element. After that it skips the element the next time.

1. clone the select before adding stuff (clone without parameters)
2. Remove the original
3. add stuff to the cloned element
4. put it back in dom
5. call .page() or .selectmenu() on it, or call .page() on the element that contains it.

Should help. If not, then try to create a new select element from scratch and load it with options from the original one and add new ones and then proceed.

[edit]

The above was just a guess. Your code is ok the way it is. just needs a single call to .selectmenu() Working code:

http://jsfiddle.net/UcrD8/45/

Should use .trigger("create") on the parent of the object(s) you want to render correctly.

Check the following link:

http://demos.jquerymobile.com/1.3.2/faq/injected-content-is-not-enhanced.html

And the following answer: https://stackoverflow.com/a/11054451/487812