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

【问题标题】：JQM (jQueryMobile) Dynamically added elements not displaying correctly and CSS is not appliedJQM (jQueryMobile) 动态添加的元素未正确显示且未应用 CSS
【发布时间】：2011-07-12 01:53:03
【问题描述】：

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

【问题讨论】：

标签： jquery html css dynamic jquery-mobile

【解决方案1】：

试试这个：

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

或者这将强制重建它：

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

如果有效，请告诉我。

【讨论】：

我测试了，但我还没有找到解决方案，对不起。
感谢您的努力 +1 不放弃
我有一个问题，选择中的第一项没有显示，而 selectmenu('refresh') 已经解决了这个问题。谢谢！

【解决方案2】：

我不知道为什么.selectmenu('refresh'); 不起作用，但至于页面 - 你可以在一个元素上使用它一次。之后，它会在下一次跳过该元素。

在添加内容之前克隆选择（不带参数的克隆）
删除原件
向克隆的元素添加内容
放回dom中
对其调用.page()或.selectmenu()，或对包含它的元素调用.page()。

应该有帮助。如果没有，请尝试从头开始创建一个新的选择元素，并使用原始选项中的选项加载它并添加新选项，然后继续。

[编辑]

以上只是猜测。你的代码没问题。只需要一个电话到.selectmenu() 工作代码：

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

【讨论】：

一个小细节，我使用的是 jQuery 1.5，这只适用于 jQuery 1.5.1 感谢修复，非常感谢
感谢您指出。知道 1.5 与 1.5.1 在 jqm 支持方面的不同对我来说非常有用。没想到

【解决方案3】：

应该在要正确渲染的对象的父级上使用 .trigger("create")。

查看以下链接：

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

还有以下答案： https://stackoverflow.com/a/11054451/487812

【讨论】：