jquery - JQM (jQueryMobile) 动态添加的元素未正确显示且未应用 CSS

标签 jquery html css dynamic jquery-mobile

我在动态添加选择标签时遇到问题,未应用 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();

最佳答案

试试这个:

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

或者这将强制重建它:

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

如果有效,请告诉我。

关于jquery - JQM (jQueryMobile) 动态添加的元素未正确显示且未应用 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5249250/

相关文章:

javascript - jQuery 将操作应用于被注入(inject)的元素

jquery - 如何创建一个边框,该边框将勾勒出 div 减去边距

jquery - 从类名获取 CSS url 路径

javascript - 如何使用 JQuery 检查输入单选按钮?

javascript - 用限制更改文本区域的背景

php - 我正在尝试将信息从 mysql/php 表传递到模式窗口

html - 增加 App Store 徽章的边距以匹配 Google Play 商店徽章的大小

javascript - Jquery - 在 3 个 div 上循环运行 css 规则,每 N 秒一次

用于 Web 开发和模板的基于 Python CGI 的框架?

html - 如何使用 HTML 将 CSS 中的 DIV 元素居中?