jquery-mobile 创建动态控制组并应用 jquery-ui css [重复]

Question

这是我的代码： http://jsfiddle.net/YKvR3/34/

我将使用我的数组（名称）中的值创建一个控制组。 问题是，当我单击加载按钮时，值会添加到控件组中，但 jquery-ui 样式并未像图像中那样加载。 控制组未使用 jquery-ui 移动 css 进行样式设置。

$("#load").click(function(){
var name=["one","two"];
var html='<fieldset id="listPlayers" data-role="controlgroup"><legend><h1>Choose as many players as youd like to remove:</h1></legend>';
for ( var int = 0; int < 2; int++) {
        html+='<input type="checkbox" name="checkbox-'+int+'a" id="checkbox-'+int+'a" class="custom" /><label for="checkbox-'+int+'a">'+name[int]+'</label>';
    }
    alert('<legend><h3>Choose as many players as you would like to remove:</h3></legend>'+html+'</fieldset');
    $("#list").html(html+'</fieldset');       
//$("#list").page();});​

我做错了什么？ 谢谢。

Answer 1

为了替换内容，您应该使用.html(); 而不是.append()，这会在现有内容之后添加新内容。 向 jQuery Mobile 页面添加内容后，您需要增强内容，例如使用 $("input[type='radio']").checkboxradio();

Answer 2

$("#list").trigger('create');

发件人：jqm docs

如果您生成新的标记客户端或通过 Ajax 加载内容并将其注入页面，您可以触发 create 事件来处理新标记中包含的所有插件的自动初始化。这可以在任何元素（甚至是页面 div 本身）上触发，从而为您节省手动初始化每个插件（listview 按钮、选择等）的任务。

Answer 3

如果这篇文章太旧并且我的帖子不符合正确的标准，因为这是有史以来第一次发帖，所以我会申请，所以如果它非常糟糕，请纠正我:-]

但是如果其他人遇到它，我在动态数据的显示方式上遇到了类似的问题，我使用上面的 jsfiddles 和 cmets 作为帮助，这就是我的工作，离我的解决方案有点接近，我没有一个按钮来加载页面加载时自动加载的数据。

更新在我的 .html 文件中：

<div id="members"></div>     
<input type="button" id="load" value="test"/>

更新在我的 .js 文件中：

$("#load").click(function(){

var name = ["NameOne","NameTwo", "NameThree"];
var fset = '<fieldset data-role="controlgroup" id="members-ctrlgroup"><legend>This is a legend:</legend>';
var labels='';

    for ( var i = 0; i < name.length; i++) {

        labels  += '<input type="checkbox" class="checkbox" id="c'
                + i
                + '"><label for="c'
                + i
                + '" data-iconpos="right">'
                + name[i]
                +'</label>';
    }
    $("#members").html(fset+labels+'</fieldset>');       
    $("#members").trigger("create");
});

我知道我如何划分“字段”看起来有点奇怪，但我发现在这些情况下让整个 html 字符串正确时会更容易一些。

更新为了获得圆角并将其作为一个控制组，您必须采用这种方法。就像以前的海报显示的那样。 请注意，带有 checkbox 和 label for= 的 id 如果它们不相同，则可能会导致输出错误:-]

fiddle

Answer 4

我正在使用

for( var i=0 ; i < html.length ; i++ ){

                        var spline = html[i].split("|");

                        inHTML = inHTML +  " <input type=\"checkbox\" name=\"checkbox-"+i+"a\" id=\"checkbox-"+i+"a\" class=\"custom\" /> <label for=\"checkbox-"+i+"a\">"+ spline[0] +" , "+ spline[2] +"</label> ";


                    }

                    jq("fieldset#myFieldSet").empty();
                    jq("fieldset#myFieldSet" )
                    // Append the new rows to the body
                    .append( inHTML )
                    // Call the refresh method
                    .closest( "fieldset#myFieldSet" )

                    // Trigger if the new injected markup contain links or buttons that need to be enhanced
                    .trigger( "create" );