jQuery - CSS and JS not applied after Document Ready is called?

Question

I'm attempting to work with HandleBars JS and so far it's mostly working. However I've run into an interesting issue.

I'm attempting to get HandleBars to render a user input form with three text fields. For testing I have pasted into my document the JSON string needed to build those three text fields and it works beautifully. However when I use $.getJSON and call the exact same JSON string via ajax when it renders the text fields no CSS or jQuery rules are applied to the form.

I know it's due to the fact Document Ready has been called by this point as I added a Document Ready around my static string and the same thing happened that they didn't render any CSS or JS rules.

Is there a way I can re-force all jQuery and CSS rules to refresh? or how can I get this to work?

Also, please note this is not jQuery Mobile.

Much thanks in advance.. and please ask if you have any questions before down voting.

EDIT - Here's the code:

Static Version

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

Dynamic Version

$.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));
        }
    });
});

Handlebars Template

<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>

Answer 1

I figured it out.

I removed the majority of my javascript code from a document ready and had my getJSON call a function which executed the rest of my javascript after the getJSON had finished running.