JQM（jQueryMobile）动态添加的元素不正确显示，不应用CSS

问题描述

我在动态添加选择标记时遇到问题，没有应用CSS和其他HTML标记（即JQM添加）。

这里是我如何添加新的选择标签的示例：

HTML：

 < div data- role =pageid =page_1> 
< 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>栏< / option> 
< / select> 
< / div> 
< / div> 
< / div> 
  

JS：

  $（function（）{
 var counter = 2; 
 var onChange = function（e）{
 val = $（'：selected'，this）.val （）||''; 
 if（val！=''）{
 //他们也可以在有效的选项之间切换
 //让我们避免使用类我们可以应用
 var c ='alreadyMadeASelection'; 
 if（$（this）.hasClass（c））
 return; 
 //现在选择并克隆它，然后重命名
 var newSelect = $（this）
 .clone（）
 .attr（'name'，'select_options _'+ counter）
 .attr ，'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（）; 
 
 //重新排序计数器（我们不希望在中间缺少数字）
 $（'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）; 
}）; 
  

我尝试过：

  //这会得到选择标签堆栈，但仍然没有CSS 
 $（newSelect）.fieldcontain（'refresh'）; 
 
 //不做任何操作
 $（newSelect）.page（）; 
 
 //不做任何事情
 $（'＃page_1'）。page（）; 
  

解决方案

我不知道为什么 .selectmenu（'refresh'）; 不起作用，但是对于page - 你可以在一个元素上使用它。之后，它会跳过元素下一次。

1. 在添加内容之前克隆该选择（克隆无参数）


2. 删除原始


3. 向克隆的元素添加内容


4. 将其放回dom


5. 调用 .page （）或 .selectmenu（），或调用 .page




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





编辑]





上面只是一个猜测。你的代码是确定的方式。只需要一次调用 .selectmenu（）
工作代码：







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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！