jQuery - Document Ready를 호출 한 후에 CSS와 JS가 적용되지 않습니까?

나는 HandleBars JS로 작업하려고 시도하고 있으며 지금까지 대부분 효과적이다. 그러나 나는 흥미로운 문제를 겪었다.jQuery - Document Ready를 호출 한 후에 CSS와 JS가 적용되지 않습니까?

세 개의 텍스트 필드가있는 사용자 입력 양식을 렌더링하도록 HandleBars를 가져 오려고합니다. 테스트를 위해 필자는이 세 개의 텍스트 필드를 작성하는 데 필요한 JSON 문자열을 내 문서에 붙여 넣었으며 아름답게 작동합니다. 그러나 $ .getJSON을 사용하고 텍스트 필드를 렌더링 할 때 아약스를 통해 정확히 동일한 JSON 문자열을 호출 할 때 CSS 또는 jQuery 규칙이 양식에 적용되지 않습니다.

정적 문자열 주위에 문서 준비를 추가하고 CSS 또는 JS 규칙을 렌더링하지 않은 동일한 문제가 발생했기 때문에 Document Ready가이 시점에서 호출 되었기 때문입니다.

모든 jQuery 및 CSS 규칙을 새로 고칠 수있는 방법이 있습니까? 또는 어떻게 작동시킬 수 있습니까?

또한 이 아니라 jQuery Mobile입니다.

미리 감사드립니다. 투표하기 전에 질문이 있으시면 언제든지 문의하십시오.

편집 - 여기에 코드입니다 :

정적 버전

var source = $("#form-template").html(); 
var template = Handlebars.compile(source); 
var data = { 
    info: { id: 'longbeach2012', name: 'Long Beach 2012' }, 
forms: [ 
{id: "1", label: "This is a label", description: "", type: "text", name: "t1", username: "alan" }, 
{id: "2", label: "This is a label2", description: "description2", type: "text", name: "t2", username: "allison" }, 
{id: "3", label: "This is a label3", description: "description3", type: "text", name: "t3", username: "ryan" } 
]}; 
var example = {title: "Sample Title", body: "Sample Body"}; 
$("#testForm").html(template(data));

동적 버전

$.getJSON('http://register.local.dev/fetchtemplate', 
{ 
    language: 'english', 
    formid: 'longbeach2012' 
}, 
function(data) { 
    $.each(data, function(i,item){ 
     if(item.elem_type === 'text') 
     { 
      var source = $("#textinput-template").html(); 
      var template = Handlebars.compile(source); 
      $("#testForm").append(template(item)); 
     } 
    }); 
});

핸들 바 템플릿

은

<script id="textinput-template" type="text/x-handlebars-template"> 
<div id="q{{elem_id}}"> 
    <div class="small">{{trans_label}}{{#if trans_description}}</br /> 
    <span class="notice">{{trans_description}}</span>{{/if}}</div> 
    <input type="{{elem_type}}" name="{{elem_name}}" id="{{elem_name}}" value="{{trans_defaultValue}}" tabindex="1" autocomplete="off" /> 
</div>

출처

2012-05-21 Peter

코드를 표시하십시오. –

나는 그것을 알아 냈다.

문서에서 준비된 자바 스크립트 코드의 대부분을 제거하고 getJSON이 getJSON이 실행을 마치면 나머지 자바 스크립트를 실행하는 함수를 호출했습니다.

출처

2012-05-29 20:28:32 Peter

jQuery - Document Ready를 호출 한 후에 CSS와 JS가 적용되지 않습니까?

답변

관련 문제