Question

我定义了一个featureGenerator函数，用于在HTML中动态生成jQuery旋钮。但是，插入此旋钮后，即使浏览器检查器确认插入了代码，旋钮的所有属性也都消失了。所以我测试了在Jquery之外运行函数并且它正常工作。任何人都能告诉我我做错了什么吗？谢谢！

我使用的旋钮是here...

JSFiddle here...

function featureGenerator(htmlID, feature, initStatus1, initStatus2, idName) {

        if (feature === "knob") {htmlID.innerHTML="<div idName='"+id+"'>"+
                "<div id='myOuterKnob' style='position:absolute;left:4px'>"+
                "<input class='knob' id='outerKnob' data-width='180' data-height='180' "+
                "data-thickness='.4' data-angleOffset=-125 data-displayInput=false "+
                "data-angleArc=250 data-step='5' data-fgColor='#1e8bf2' data-bgColor='#d4eeec' "+
                "data-linecap=round value='"+initStatus1+"'></div>"+

                "<div id='myInnerKnob' style='position:absolute;left:44px;top:40px;display:block;'>"+
                "<input class='knob' id='innerKnob' data-width='100' data-height='100' "+
                "data-thickness='.5' data-angleOffset=-125 data-displayInput=false "+
                "data-angleArc=250 data-step='5' data-fgColor='#1e8bf2' data-bgColor='#d4eeec' "+
                "data-linecap=round value='"+initStatus2+"'></div></div>";
        }
      }

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

        $(".classname1").click(function(){
          $(this).find(".togglerRound").toggle("fold", 250);

          featureGenerator(($(this)).get(0).childNodes[0].childNodes[0], "knob", 0, 0, "146A");

        });
    })

Answer 1

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

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

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

在featureGenerator函数结束时。

甚至更好地改变它，所以你定位一个单独的旋钮ID而不是整个类：

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

我更新了你的小提琴：http://jsfiddle.net/jn4rW/3/ 风格完全关闭，但旋钮工作。

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

Answer 2

找到解决方案！可能由于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);

jQuery Knob在插入HTML后未加载

2 个答案: