动态修改DOM并添加到文档

Question

我有一个x-template部分，其中包含一个调查元素（基本上是一个文本字段和单选按钮）。当用户根据以前存储的部分加载屏幕时，数据库将通过jSON对象发送到UI，然后使用JSON对象填充此调查模板。

我能够动态创建整个模板，并且没有任何问题。但是，当我尝试用JSON对象的值填充模板时 - 我遇到了问题。任何帮助表示赞赏我可能做错了什么。

感谢

Fiddle here

的Javascript：

$(document).on('click', '.btn-toggle', function() { 
    $(this).find('.btn').toggleClass('active'); 

    if ($(this).find('.btn-primary').size() > 0) { 
     $(this).find('.btn').toggleClass('btn-primary'); 
    } 

    $(this).find('.btn').toggleClass('btn-default'); 
}); 

var questions = [{ 
    "id": "6", 
     "survey_id": "23", 
     "name": "How are you? Not here?", 
     "subtext": "", 
     "type": "1", 
     "required": "N" 
}, { 
    "id": "7", 
     "survey_id": "23", 
     "name": "Where are you?", 
     "subtext": "", 
     "type": "1", 
     "required": "Y" 
}]; 


for (var key in questions) { 
    question = questions[key]; 
    var questionTemplate = $('#textSurveyTemplate'); 
    $('#textSurveyTemplate').find('input#question-name').attr('value', question.name); 
    $('.test').append($('#textSurveyTemplate').text()); 
} 

HTML代码：

<script id="textSurveyTemplate" type="text/x-tmpl"> 
    <div class = "text-question" > 
     <div class = "form-group survey-form-group" style = "border-bottom: none;"> 
      <label class = "col-md-2 control-label" > Question </label> 
      <div class="col-md-9"> 
       <input type="text" class="form-control" id="question-name" name="qname" placeholder="Question" value="" data-type="1" /> 
      </div> 
     </div> 
     <div class="form-group survey-form-group"> 
      <label class="col-md-2 control-label">Required</label> 
      <div class = "col-md-9 btn-group btn-toggle" > 
       <button type = "button" class = "btn btn-xs btn-default" > Y </button> 
       <button type="button" class="btn btn-xs btn-primary active">N</button > 
      </div> 
     </div > 
    </div> 
</script> 
<div class="test">Test Area</div> 

Answer 1

固定它 - 诀窍是用appendTo和新追加的元件分配给用于将来操纵的变量。显然，当一个DOM被附加到另一个DOM元素时，现有的引用会被清除，这就是为什么它没有工作。我更新了小提琴here

更新后的JavaScript代码如下 - 注意使用appendTo和操纵从那里起

$(document).on('click', '.btn-toggle', function() { 
    $(this).find('.btn').toggleClass('active'); 

    if ($(this).find('.btn-primary').size() > 0) { 
     $(this).find('.btn').toggleClass('btn-primary'); 
    } 

    $(this).find('.btn').toggleClass('btn-default'); 
}); 

var questions = [{ 
    "id": "6", 
     "survey_id": "23", 
     "name": "How are you? Not here?", 
     "subtext": "", 
     "type": "1", 
     "required": "N" 
}, { 
    "id": "7", 
     "survey_id": "23", 
     "name": "Where are you?", 
     "subtext": "", 
     "type": "1", 
     "required": "Y" 
}]; 


for (var key in questions) { //questions is defined in edit.ctp 
    question = questions[key]; 
    var template = $('#textSurveyTemplate').html(); 
    var curr = $(template).appendTo($('.test')); 
    curr.find('input#question-name').val(question.name); 
} 

Answer 2

我遇到了类似的问题在几个星期前，结束了使用以下插件。它非常轻巧（6kbs），简单地工作。

https://code.google.com/p/jquery-load-json/

Answer 3

我第一次尝试的东西取代您的最终循环是这样的：

for (var key in questions) { 
    question = questions[key]; 
    var questionTemplate = $('.textSurveyTemplate').html(); 
    $('.test').append(questionTemplate).find('input#question-name').attr('value', question.name); 
} 

但是，这将在每次迭代中所有生成的元素替换，所以我们必须在标识添加到每一个元素以取代其适当的价值。

for (var i=0 ; i<questions.length ; i++) { 
    question = questions[i]; 
    var questionTemplate = '<div id="'+i+'" class="text-question">' + $('.textSurveyTemplate').html() + '</div>'; 
    $('.test').append(questionTemplate); 
    $('#'+i).find('input#question-name').attr('value', question.name); 
}