Bir glifikon eklemek için jQuery'yi kullanma - görünmüyor -

Question

Form üzerinde çalıştığınız soruyu temel alarak oluşturduğum bir soru formunun başlığına bir glifikon eklemek için jQuery kullanıyorum.

var jsonObj = $.parseJSON(payload); 

var headerData = jsonObj.fields;  

for (var i = 0; i < headerData.length; i++) { 

    $nr = $('.nr' + i); 
    $qnr = $('.qnr' + i); 

    $nr.on("mousedown",function() { 
     $('.glyphicon-saved').remove(); 
     $('.glyphicon-pencil').remove(); 
     $qnr.append('<span class="glyphicon glyphicon-pencil pencil" aria-hidden="true"></span>'); 
    }); 

    $nr.on("mouseleave", function() { 
     $('.glyphicon-saved').remove(); 
     $('.glyphicon-pencil').remove(); 
     $qnr.append('<span class="glyphicon glyphicon-saved pencil" aria-hidden="true"></span>'); 

    }); 

    } 

Ben json verilerini ayrıştırma yoluyla html kuruyorum: İşte benim kod Yani benim problem

for (var i = 0; i < headerData.length; i++) { 

     if(jsonObj.fields[i].field_type == "sFormName") { 

      body.unshift("<div class='panel panel-default panel-element main-heading'><div class='panel-heading'>" + jsonObj.fields[i].label + "</div></div>") 

     } else if (jsonObj.fields[i].required == true) { 

      body.push("<div class='panel panel-default panel-element question-element'><div class='panel-heading question-heading qnr" + i + "'>" + jsonObj.fields[i].label + "<label style='color: red'>&nbsp*</label></div>"); 

     } else { 

      body.push("<div class='panel panel-default panel-element question-element'><div class='panel-heading question-heading qnr" + i + "'>" + jsonObj.fields[i].label + "</div>"); 

     }      

     if (jsonObj.fields[i].field_type == "QuestionTextBig") { 

     body.push("<div class='panel-body'><textarea class='large-text form-control nr" + i + "'></textarea></div></div>"); 

     } else if (jsonObj.fields[i].field_type == "QuestionText") { 

      body.push("<div class='panel-body'><input class='form-control text-small nr" + i + "' type='text'></div></div>"); 

     } else if (jsonObj.fields[i].field_type == "QuestionMultiBegin") { 

      var data = jsonObj.fields[i].field_options.options; 

      body.push('<table class="table table-striped table-bordered"><tr class="tr-header"><th>Mjög sammála/Strongly agree</th><th>Frekar sammála/Agree</th><th>Hvorki né/Indifferent</th><th>Frekar ósammála/Disagree</th><th>Mjög ósammála/Strongly disagree</th><th>Staðhæfing/Statement</th></tr>') 

      for (var j = 0; j < data.length; j++) { 
      body.push("<tr><td><input type='radio' name='radio" + j + "' class = 'nr" + i + "></td><td><input type='radio' name='radio" + j + "'></td><td><input type='radio' name='radio" + j + "'></td><td><input type='radio' name='radio" + j + "'></td><td><input type='radio' name='radio" + j + "'></td><td>" + jsonObj.fields[i].field_options.options[j].label + "</td></tr>"); 
      } 

      body.push('</table></div>')   

     } else if (jsonObj.fields[i].field_type == "QuestionParagraph") { 

      body.push("<div class='panel-body paragraph-text'>" + jsonObj.fields[i].field_options.description + "</div></div>"); 

     } else if (jsonObj.fields[i].field_type == "QuestionDropdown") { 

      var data = jsonObj.fields[i].field_options.options; 

      body.push("<div class='panel-body'><div class='dropdown'><button class='btn btn-default dropdown-toggle' type='button' data-toggle='dropdown'><span data-bind='label'>" + jsonObj.fields[i].field_options.options[0].label + "</span>&nbsp;<span class='caret'></span></button><ul class='dropdown-menu'>"); 


      for(var j = 0; j < data.length; j++) { 
       body.push("<li><a href='#' class='nr" + i + "'>" + jsonObj.fields[i].field_options.options[j].label + "</a></li>"); 
      } 

      body.push("</ul></div></div></div>"); 

     } else if (jsonObj.fields[i].field_type == "QuestionRadio") { 

      var data = jsonObj.fields[i].field_options.options; 

      body.push("<div class='panel-body'><div class='radio'><div class='controls nr" + i + "'>"); 

      for(var j = 0; j < data.length; j++) { 
       body.push("<label class='radio' value='option'><input type='radio' name='radio'>" + jsonObj.fields[i].field_options.options[j].label + "</label>"); 
      } 

      if (jsonObj.fields[i].field_options.include_other_option == true) { 
       body.push("<label class='radio' value='option'><input type='radio' name='radio' class='other-input'> Annað/Other<input class='form-control other-text' type='text'>") 
      } 


      body.push("</div></div></div></div>"); 

     } else if (jsonObj.fields[i].field_type == "Registration") { 

      body.push("<div class='panel-body'>"); 
      body.push("<div class='form-group'><form class='reg-form nr" + i + "' role='form'><div class='form-group'><label for='email'>" + jsonObj.fields[i].field_options.options[0].label + "</label>"); 
      body.push("<input type'email' class='form-control' id='email'></div>"); 
      body.push("<div class='form-group'><form class='reg-form nr" + i + "' role='form'><div class='form-group'><label for='pwd'>" + jsonObj.fields[i].field_options.options[1].label + "</label>"); 
      body.push("<input type'password' class='form-control' id='pwd'></div>"); 
      body.push("<div class='checkbox'><label><input type='checkbox'> Muna mig/Remember me</label></div></form></div>"); 
      body.push("</div></div></div>") 
     } 

    var htmlMarkup = body.join(''); 

    $(container).html(htmlMarkup); 
} 

olduğunu

, nr $ ve $ QNR için seçiciler hem doğru (Ben yapabilirsiniz çalışıyoruz konsol.log ile doğru verileri seçtiklerini görüyoruz, ancak $ qnr.append() çalışmıyor ve hata mesajı alamıyorum, bu yüzden neden diye kayboldum. Bu sorunun çözümü için bir fikri olan var mı? Teşekkürler!

Answer 1

sonra kullanmak, öncelikle bir kapatma Html'nizi oluşturmak emin olun: -

var jsonObj = $.parseJSON(payload); 

var headerData = jsonObj.fields; 

for (var i = 0; i < headerData.length; i++) { 

    (function(i) { 

    $nr = $('.nr' + i); 
    $qnr = $('.qnr' + i); 

    $nr.on("mousedown", function() { 
     $('.glyphicon-saved').remove(); 
     $('.glyphicon-pencil').remove(); 
     $qnr.append('<span class="glyphicon glyphicon-pencil pencil" aria-hidden="true"></span>'); 
    }); 

    $nr.on("mouseleave", function() { 
     $('.glyphicon-saved').remove(); 
     $('.glyphicon-pencil').remove(); 
     $qnr.append('<span class="glyphicon glyphicon-saved pencil" aria-hidden="true"></span>'); 

    }); 

    })(i); 

} 

bir kapatma olmadan, $ qnr hep for yineleme son öğe olacaktır.