JQM (jQueryMobile) Динамически добавленные элементы не отображаются правильно, а CSS не применяется

У меня проблема с добавлением тега select динамически, CSS и дополнительные теги html (которые добавляет JQM) не применяются.

Вот пример того, как я добавляю новый тег выбора: http://jsfiddle.net/UcrD8/4/

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>

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);
});

Я пробовал:

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

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

// does nothing
$('#page_1').page();
Источник

3 ответа

Решение

Я не имею понятия почему .selectmenu('refresh'); не работает, но что касается страницы - вы можете использовать ее один раз для элемента. После этого он пропускает элемент в следующий раз.

  1. клонировать выбор перед добавлением материала (клонировать без параметров)
  2. Удалить оригинал
  3. добавить материал к клонированному элементу
  4. положить его обратно в дом
  5. вызов .page() или же .selectmenu() на это, или позвоните .page() на элементе, который содержит его.

Должно помочь. Если нет, то попробуйте создать новый элемент выбора с нуля и загрузить его с вариантами из исходного и добавить новые, а затем продолжить.

[редактировать]

Выше было просто предположение. Ваш код в порядке, так оно и есть. просто нужно один звонок .selectmenu()Рабочий код:

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

Источник

Попробуй это:

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

или это, которое заставит его восстановить:

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

и, пожалуйста, дайте мне знать, если это сработало.

Источник

Следует использовать.trigger("create") на родительском объекте (объектах), который вы хотите правильно отобразить.

Проверьте следующую ссылку:

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

И следующий ответ: /questions/12359858/dinamicheski-dobavlyajte-knopki-v-prosmotr-spiska-s-pomoschyu-jquery-mobile/12359863#12359863

Источник
Другие вопросы по тегам