如何将无线电元素注入面板？

Question

我正在尝试对面板进行动态注入。我不确定这个问题是因为我调用这个函数时面板被隐藏了还是我没有正确注入数据。

我的目标控制组在面板中 - 当我运行此函数更新值时隐藏，但变得冻结且无法使用，即使它与我在本地的工作模型相同。无线电组不知何故仍然锁定在第一个无线电元素上，我无法在我运行此功能后单击更改值。

它在侧面板中 [filter] > https://jsbin.com/gugepeboci/edit?html,js,output

HTML（jQuery 移动端更改页面上的此结构并在 .ui-controlgroup-controls 中包装无线电元素）

<fieldset id="colour-radio-group" data-role="controlgroup" data-mini="true" data-iconpos="right">
    <legend></legend>
        <input type="radio" name="colour-choice" id="radio-choice-5" value="Any Colour" checked="checked">
        <label for="choice-1">Any Colour</label>
        <input type="radio" name="colour-choice" id="radio-choice-6" value="orange">
        <label for="choice-2">Green</label>
        <input type="radio" name="colour-choice" id="radio-choice-7" value="yellow">
        <label for="choice-3">Orange</label>
        <input type="radio" name="colour-choice" id="radio-choice-8" value="violet">
        <label for="choice-4">Purple</label>
</fieldset>

Javascript 和 jQuery

 // Data to be inserted
 var myArray = ["red", "blue", "black"];

 //Empty radio group for new data
 $("#colour-radio-group .ui-controlgroup-controls").empty();

 // Loop array and add data dynamically
 for (var x = 0; x < myArray.length; x++) {

     var index = x + 2;

     if (x == 0) {

         // inject default
         $(`<div class="ui-radio ui-mini">
               <label for="colour-choice-1" class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-right ui-radio-on ui-first-child">Any Colour</label>
               <input type="radio" name="colour-choice" id="colour-choice-1" value="default" checked="checked" data-cacheval="false">
            </div>`).appendTo('#colour-radio-group .ui-controlgroup-controls');

     }

     // inject data
     $(`<div class="ui-radio ui-mini">
           <label for="colour-choice-` + index + `" class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-right ui-radio-off">`+ myArray[x] +`</label>
           <input type="radio" name="colour-choice" id="colour-choice-` + index + `" value="` + myArray[x] + `" data-cacheval="false">
        </div>`).appendTo('#colour-radio-group .ui-controlgroup-controls');

 }

// fix UI problem
$('#colour-radio-group .ui-controlgroup-controls').children().last().children('label').addClass('ui-last-child');

这个问题我有点临危不乱，一直在给自己挖坑，有什么建议吗？

Answer 1

仅添加普通-html（而不是jquery-移动内容）。

并触发 "create" 到“#colour-radio-group”完成工作。

> https://jsbin.com/nijezovali/1/edit?html,js,output

编辑：如果需要，您可以添加 jquery 移动内容。

$('#colour-radio-group .ui-controlgroup-controls').trigger("create");

够了。

Answer 2

这是动态生成新控制组的更好方法。请注意，此解决方案仅用于创建全新的单选按钮控件组。

// Data to be inserted
var myArray = ["red", "blue", "black"];

$('#click').click(function() {

  // Remove existing controlgroup
  $(".mypanels .ui-controlgroup").remove();

  // Create a new one
  var rbuttons = $("<fieldset/>", {
    id: "colour-radio-group",
    "data-role": "controlgroup",
    "data-mini": true
  });

  // Add it
  rbuttons.appendTo(".mypanels");

  // Loop array and add data dynamically
  for (var x = 0; x < myArray.length; x++) {
    if (x == 0) {

      // inject default
      rbuttons.append($("<input/>", {
        type: "radio",
        name: "colors-panel",
        id: "color-d",
        checked: true
      })).append($("<label/>", {
        for: "color-d",
        text: "Any Color"
      }));

    }

    // inject data
    rbuttons.append($("<input/>", {
      type: "radio",
      name: "colors-panel",
      id: "color-" + x
    })).append($("<label/>", {
      for: "color-" + x,
      text: myArray[x]
    }));
  }

  // Apply jQM enhancement
  $("#colour-radio-group").controlgroup();
});

Demo

如何将无线电元素注入面板？

How do I inject radio elements into the panel?

javascript

jquery

html

jquery-mobile