JQM (jQueryMobile) 动态添加的元素未正确显示且未应用 CSS [英] JQM (jQueryMobile) Dynamically added elements not displaying correctly and CSS is not applied

问题描述

我在动态添加 select 标记时遇到问题，未应用 CSS 和其他 html 标记(JQM 添加的).

以下是我如何添加新选择标签的示例:http://jsfiddle.net/UcrD8/4/

HTML:

<div id="select_option_groups"><div data-role="fieldcontain"><select name="select_options_1"><option value="" selected>请选择一个选项</option><option value="foo">Foo</option><option value="bar">Bar</option></选择>

JS:

$(function(){无功计数器 = 2;var onChange = 函数(e){val = $(':selected',this).val() ||'';如果(瓦尔！= ''){//他们也可以在有效选项之间切换.//让我们避免使用我们可以应用的类var c = 'alreadyMadeASelection';如果 ($(this).hasClass(c))返回;//现在获取当前选择并克隆它，然后重命名它var newSelect = $(this).克隆().attr('name','select_options_'+counter).attr('id','select_options_'+counter).appendTo('#select_option_groups').change(onChange);$(this).addClass(c);计数器++；} 别的 {var id = $(this).attr('name').match(/d+$/), parent = $(this).parent();$(this).remove();//重新排序计数器(我们不希望中间缺少数字)$('select',parent).each(function(){var iid = $(this).attr('name').match(/d+$/);如果(iid> id)$(this).attr('name','select_options_'+(iid-1));});柜台 - ;}};$('#select_option_groups select').change(onChange);});

我试过了:

//这让选择标签堆叠但仍然没有 CSS$(newSelect).fieldcontain('刷新');//什么也没做$(newSelect).page();//什么也没做$('#page_1').page();

解决方案

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

1. 在添加内容之前克隆选择(不带参数的克隆)
2. 删除原来的
3. 向克隆元素添加内容
4. 把它放回dom中
5. 对其调用 .page() 或 .selectmenu() ，或者在包含它的元素上调用 .page() .

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

以上只是猜测.你的代码没问题.只需要一次调用 .selectmenu()工作代码:

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

I'm having an issue with adding a select tag dynamically, the CSS and additional html tags (that JQM add) are is not being applied.

Here is an example of how I'm adding the new select tag: http://jsfiddle.net/UcrD8/4/

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

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

I've tried:

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

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

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

解决方案

I have no idea why .selectmenu('refresh'); doesn't work, but as for page - you can use it once on an element. After that it skips the element the next time.

1. clone the select before adding stuff (clone without parameters)
2. Remove the original
3. add stuff to the cloned element
4. put it back in dom
5. call .page() or .selectmenu() on it, or call .page() on the element that contains it.

Should help. If not, then try to create a new select element from scratch and load it with options from the original one and add new ones and then proceed.

[edit]

The above was just a guess. Your code is ok the way it is. just needs a single call to .selectmenu() Working code:

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

这篇关于JQM (jQueryMobile) 动态添加的元素未正确显示且未应用 CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！