Ручка jQuery не загружается после вставки в HTML

0

Я определил функцию featureGenerator для генерации ручки jQuery "на лету" в HTML. Однако после установки этой ручки все свойства ручки исчезли, даже если инспектор браузера подтвердил введенный код. Поэтому я тестировал запуск функции вне 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");

        });
    })
  • 0
    Вы инициализируете knob () для document.ready, но он не существует, пока вы не создадите его позже.
Теги:

2 ответа

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

Таким образом, вы динамически вставляете код для регуляторов после попытки их инициализации. Конечно, инициализировать нечего, так как ручек еще нет. Вот почему это не работает.

Вы должны инициализировать ручку после (не раньше), которую вы создаете знакомой. Поэтому вы должны переместить это:

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

В конце функции featureGenerator.

И даже лучше измените его, чтобы вы нацелили индивидуальный идентификатор ручки, а не весь класс:

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

Я обновил вашу скрипку: http://jsfiddle.net/jn4rW/3/ стиль полностью выключен, но ручка работает.

Вы не включили библиотеку ручек, и вы вызывали конструктор ручек, прежде чем иметь HTML-код.

  • 0
    Я уже пытался поместить эту строку после вставки, но, похоже, тоже не работает. Тем не менее, я посмотрю, поможет ли точное определение идентификатора. Спасибо за предложение!
  • 0
    Было бы полезно, если бы вы могли сделать jsfiddle из этого.
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню