jquery-mobile tạo controlgroup năng động và áp dụng jquery-ui css

Question

Đây là mã của tôi: http://jsfiddle.net/YKvR3/34/

tôi sẽ tạo ra một controlgroup có giá trị cao trong mảng của tôi (tên). Vấn đề là khi tôi bấm vào nút tải các giá trị được thêm vào trong một nhóm điều khiển nhưng các kiểu jquery-ui không được nạp như trong hình ảnh. Nhóm điều khiển không được tạo kiểu với css di động jquery-ui.

$("#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();});​ 

Những gì tôi đang làm sai? Cảm ơn.

Answer 1

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

Từ: jqm docs

nếu bạn tạo mới đánh dấu client-side hoặc tải nội dung thông qua Ajax và đưa nó vào một trang, bạn có thể kích hoạt sự kiện tạo để xử lý tự động khởi tạo cho tất cả các plugin có trong đánh dấu mới. Điều này có thể được kích hoạt trên bất kỳ phần tử nào (ngay cả chính trang div), tiết kiệm cho bạn nhiệm vụ khởi tạo thủ công từng plugin (nút listview, chọn, v.v.).

Answer 2

Để thay thế nội dung bạn nên sử dụng .html(); thay vì .append(), sẽ thêm nội dung mới sau nội dung hiện có. Sau khi thêm nội dung vào một trang jQuery Mobile bạn cần để nâng cao nội dung, sử dụng ví dụ $("input[type='radio']").checkboxradio();

Answer 3

tôi làm applogies nếu bài đăng này là quá già và nếu bài viết của tôi không phải là do các tiêu chuẩn chính xác vì đây là lần đầu tiên đăng vì vậy hãy sửa tôi nếu đó là khủng khiếp xấu: -]

Nhưng trong trường hợp người khác gặp phải vấn đề này, tôi có vấn đề tương tự với cách dữ liệu động được hiển thị và tôi đã sử dụng các câu hỏi và nhận xét ở trên như một trợ giúp, và đây là điều khiến tôi làm việc, cũng gần với giải pháp của mình, tôi không có một nút để tải dữ liệu được tải tự động khi trang được tải.

Cập nhật Trong tôi .html-file:

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

Cập nhật Trong tôi .js-file:

$("#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"); 
}); 

Tôi biết các "trường" có vẻ hơi kỳ lạ làm thế nào tôi chia nó nhưng tôi thấy nó dễ dàng hơn khi nói đến việc nhận được toàn bộ chuỗi html đúng trong những trường hợp này.

Cập nhật Để có các góc bo tròn và có nó như là một controlgroup bạn sẽ cần phải có cách tiếp cận này để thay thế. Cũng giống như các áp phích cũ cho thấy. Đừng lưu ý id với hộp kiểm và nhãn cho = có thể có xu hướng vít đầu ra nếu họ không giống nhau: -]

fiddle

Answer 4

Tôi đã sử dụng

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");