JQM(jQueryMobile) Los elementos añadidos dinámicamente no se muestran correctamente y CSS no se aplica

html dynamic

Question

Tengo un problema al agregar una etiqueta de selección de forma dinámica, el CSS y las etiquetas html adicionales (que JQM agrega) no se están aplicando.

Aquí hay un ejemplo de cómo estoy agregando la nueva etiqueta de selección: http://jsfiddle.net/UcrD8/4/

El 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>

El 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);
            counter++;
        } 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);
});

He intentado:

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

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

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

Answer 1

Debería usar .trigger ("crear") en el padre del objeto (s) que desea representar correctamente.

Mira el siguiente enlace:

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

Y la siguiente respuesta: https://.com/a/11054451/487812

Answer 2

No tengo idea de por qué .selectmenu(''refresh''); no funciona, pero en cuanto a la página, puede usarla una vez en un elemento. Después de eso, se salta el elemento la próxima vez.

1. clonar la selección antes de agregar cosas (clonar sin parámetros)
2. Eliminar el original
3. agregar cosas al elemento clonado
4. ponlo de nuevo en dom
5. llama .page() o .selectmenu() en él, o llama a .page() en el elemento que lo contiene.

Debería ayudar. De lo contrario, intente crear un nuevo elemento de selección desde cero y cárguelo con las opciones del original, agregue nuevas y luego proceda.

[editar]

Lo anterior fue solo una suposición. Tu código está bien tal como está. solo necesita una sola llamada a .selectmenu() Código de trabajo:

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

Answer 3

Prueba esto:

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

o esto que forzará la reconstrucción de él:

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

y por favor avíseme si funcionó.