Javascript jQuery旋钮未在其后面加载'；它被插入到HTML中

我定义了一个featureGenerator函数来在HTML中动态生成一个jQuery旋钮。然而，插入此旋钮后，旋钮的所有属性都消失了，即使浏览器检查器确实确认了插入的代码。因此，我测试了在Jquery之外运行该函数，它工作正常。谁能告诉我我做错了什么吗？谢谢大家!

我用的旋钮是

JSFIDLE

函数特性生成器（htmlID、特性、initStatus1、initStatus2、idName）{
如果（功能==“旋钮”）{htmlID.innerHTML=“”+
""+
""+
""+
"";
}
}
$（文档）.ready（函数（）{
$（“.knob”）.knob({
“min”：0
“最大值”：250
});
$（“.classname1”）。单击（函数（）{
$（this.find（“.toggleround”）.toggle（“fold”，250）；
featureGenerator（（$（this））.get（0）.childNodes[0].childNodes[0]，“旋钮”，0,0，“146A”）；
});
})

因此，在尝试初始化旋钮后，您将动态插入旋钮的代码。当然，没有什么可以初始化的，因为旋钮还没有。这就是它不起作用的原因

您必须在生成一个已知的旋钮之后（而不是之前）初始化旋钮。所以你应该移动这个：

$(".knob").knob({'min':0,'max':250});

在featureGenerator函数的末尾

最好将其更改为单个旋钮ID，而不是整个类：

$("#newKnobIDHere").knob({'min':0,'max':250});

我更新了你的小提琴： 样式完全关闭，但旋钮可以工作

---

您没有包含旋钮库，在使用旋钮HTML之前调用旋钮构造函数。

找到了解决方案！可能是由于jquery生成的旋钮，我实际上不得不执行appendChild操作，而不是插入一块html文本。下面是我最终使用的，创建DOM子对象并逐个设置属性

function insertDOM(tag, att){
  var fragment = document.createElement(tag);
  for (var a in att){
    if (att.hasOwnProperty(a)){
      fragment.setAttribute(a, att[a]);
    }
  }
  for (var i = 2 ; i < arguments.length ; i++){
    if (arguments[i].nodeType == 1 || arguments[i].nodeType == 3) {
      fragment.appendChild(arguments[i])}
  }
  return fragment;
}

  var fragmom = insertDOM("div", {'id': ipIdentifier})
  var frag1 = insertDOM("div", {'class':"sameOuterKnob",'style': "position:absolute;left:4px;"})
      frag1.appendChild(insertDOM("input", {'class':"knob",'data-width':"180",'data-height':"180",'data-thickness':"0.4",'data-angleOffset':-125,'data-displayInput':false,'data-angleArc':250,'data-step':"5",'data-fgColor':"#1e8bf2",'data-bgColor':"#f4f4f4",'data-linecap':'round','value':initStatus1}))
  var frag2 = insertDOM("div", {'style': "position:absolute;left:44px;top:40px;display:block"})
      frag2.appendChild(insertDOM("input", {'class':"knob",'data-width':"100",'data-height':"100",'data-thickness':"0.4",'data-angleOffset':-125,'data-displayInput':false,'data-angleArc':250,'data-step':"5",'data-fgColor':"#1e8bf2",'data-bgColor':"#f4f4f4",'data-linecap':'round','value':initStatus2}))
  fragmom.appendChild(frag1);
  fragmom.appendChild(frag2);
  htmlID.appendChild(fragmom);

函数插入域（标记，附件）{
var fragment=document.createElement（标记）；
用于（附件中的a型变量）{
if（附件hasOwnProperty（a））{
setAttribute（a，att[a]）；
}
}
for（var i=2；i

您在document.ready上初始化了knob（），但在稍后单击创建它之前它不存在。我已经尝试在插入后放置该行，但似乎也不起作用。不过，我会看看确定身份是否会有所帮助。谢谢你的建议！如果你能做一个jsfiddle，这将是很有帮助的。只是用ID而不是knob类再试一次，出于某种原因仍然不行ID只是为了不重新定位所有现有的knob，只是新的一个，但是这不会解决问题。我真的认为问题出在错误的操作顺序上，我现在不知道。放一把小提琴，我就可以用它演奏了

function insertDOM(tag, att){
  var fragment = document.createElement(tag);
  for (var a in att){
    if (att.hasOwnProperty(a)){
      fragment.setAttribute(a, att[a]);
    }
  }
  for (var i = 2 ; i < arguments.length ; i++){
    if (arguments[i].nodeType == 1 || arguments[i].nodeType == 3) {
      fragment.appendChild(arguments[i])}
  }
  return fragment;
}

  var fragmom = insertDOM("div", {'id': ipIdentifier})
  var frag1 = insertDOM("div", {'class':"sameOuterKnob",'style': "position:absolute;left:4px;"})
      frag1.appendChild(insertDOM("input", {'class':"knob",'data-width':"180",'data-height':"180",'data-thickness':"0.4",'data-angleOffset':-125,'data-displayInput':false,'data-angleArc':250,'data-step':"5",'data-fgColor':"#1e8bf2",'data-bgColor':"#f4f4f4",'data-linecap':'round','value':initStatus1}))
  var frag2 = insertDOM("div", {'style': "position:absolute;left:44px;top:40px;display:block"})
      frag2.appendChild(insertDOM("input", {'class':"knob",'data-width':"100",'data-height':"100",'data-thickness':"0.4",'data-angleOffset':-125,'data-displayInput':false,'data-angleArc':250,'data-step':"5",'data-fgColor':"#1e8bf2",'data-bgColor':"#f4f4f4",'data-linecap':'round','value':initStatus2}))
  fragmom.appendChild(frag1);
  fragmom.appendChild(frag2);
  htmlID.appendChild(fragmom);