У меня проблема с динамическим добавлением тега 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();