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

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

我瞄准的控制组在面板中-运行此函数时隐藏，它会更新值，但会冻结且不可用，即使它与我在本地使用的工作模型相同。无线电组在某种程度上仍然锁定在第一个无线电元素上，我无法在运行此功能后更改单击时的值

它位于侧面板[filter]>

HTML（jQuery Mobile在页面上更改此结构，并在

.ui controlgroup controls

中包装无线电元素）

任何颜色
绿色
橙色
紫色

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

//要插入的数据
var myArray=[“红色”、“蓝色”、“黑色”]；
//新数据的空无线电组
$（“#color radio group.ui controlgroup controls”）.empty（）；
//循环数组并动态添加数据
对于（var x=0；x

我有点偏离了这个问题，一直在给自己挖一个洞，有什么建议吗？

只添加普通html（而不是jquery mobile的东西）

并触发“创建”以“彩色广播组”完成工作

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

编辑：如果您愿意，可以添加jquery mobile内容

$（'#color radio group.ui controlgroup controls'）。触发器（“创建”）

已经足够了。

只添加普通html（而不是jquery mobile内容）

并触发“创建”以“彩色广播组”完成工作

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

编辑：如果您愿意，可以添加jquery mobile内容

$（'#color radio group.ui controlgroup controls'）。触发器（“创建”）

---

足够了。

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

// 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();
});

//要插入的数据
var myArray=[“红色”、“蓝色”、“黑色”]；
$（'#click'）。单击（函数（）{
//删除现有的控制组
$（“.mypanels.ui控制组”）.remove（）；
//创建一个新的
var rbuttons=$（“”{
id:“彩色无线电组”，
“数据角色”：“控制组”，
“数据迷你”：正确
});
//加上
rbuttons.附件（“mypanels”）；
//循环数组并动态添加数据
对于（var x=0；x

---

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

// 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();
});

//要插入的数据
var myArray=[“红色”、“蓝色”、“黑色”]；
$（'#click'）。单击（函数（）{
//删除现有的控制组
$（“.mypanels.ui控制组”）.remove（）；
//创建一个新的
var rbuttons=$（“”{
id:“彩色无线电组”，
“数据角色”：“控制组”，
“数据迷你”：正确
});
//加上
rbuttons.附件（“mypanels”）；
//循环数组并动态添加数据
对于（var x=0；x

---

请创建JSFIDLE示例！！由于某些原因，JSFIDLE无法工作。您的jsbin是错误的！！单击事件中有一个左素数符号。我创建了一个新的jsbin并修复了主要问题，但我不知道这是您想要的吗？看看，告诉我你想要什么@TaiwanHotDog和你的jsBin到底做了什么？你添加内容的方式是不可取的。无论如何，要解决您的问题，请将最后一行替换为以下内容：

//修复UI问题$（'.mypanels'）.enhanceWithin（）。请创建JSFIDLE示例！！由于某些原因，JSFIDLE无法工作。您的jsbin是错误的！！单击事件中有一个左素数符号。我创建了一个新的jsbin并修复了主要问题，但我不知道这是您想要的吗？看看，告诉我你想要什么@TaiwanHotDog和你的jsBin到底做了什么？你添加内容的方式是不可取的。无论如何，要解决您的问题，请将最后一行替换为以下内容：
//修复UI问题$（'.mypanels'）.enhanceWithin（）
.trigger（）
已过时。@Omar JQM也是如此；-）@奥马尔；-）欢迎回来@PhillHealey谢谢你伙计：）我忘了怎么编码了。我花了15分钟回答这个问题。我不再喜欢那个领域了
.trigger（）
已过时。@Omar JQM也是如此；-）@奥马尔；-）欢迎回来@PhillHealey谢谢你伙计：）我忘了怎么编码了。我花了15分钟回答这个问题。