動態修改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); 
}