0

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

我用的旋钮在这里...

JSFiddle在这里...

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

        });
    })
4

2 回答 2

1

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

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

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

在您的 featureGenerator 函数结束时。

甚至更好地更改它，以便您针对单个旋钮 ID 而不是整个类：

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

我更新了您的小提琴： http: //jsfiddle.net/jn4rW/3/ 样式完全关闭，但旋钮有效。

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

于 2013-10-10T07:00:40.920 回答
0

找到了解决方案！可能是由于 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);
于 2013-10-14T05:23:21.437 回答