jQuery-调用Document Ready后未应用CSS和JS?
我正在尝试使用车把JS,到目前为止,它大部分都在工作。然而,我遇到了一个有趣的问题 我试图让Handlebar呈现一个包含三个文本字段的用户输入表单。为了进行测试,我将构建这三个文本字段所需的JSON字符串粘贴到文档中,效果非常好。但是,当我使用$.getJSON并在呈现文本字段时通过ajax调用完全相同的JSON字符串时,表单中没有应用CSS或jQuery规则 我知道这是因为此时调用了documentready,因为我在我的静态字符串周围添加了documentready,同样的事情发生了,他们没有呈现任何CSS或JS规则 有没有办法重新强制所有jQuery和CSS规则刷新?或者我怎样才能让它工作 另外,请注意,这不是jQuery Mobile 非常感谢。。请在投票前询问您是否有任何问题 编辑-以下是代码: 静态版本jQuery-调用Document Ready后未应用CSS和JS?,jquery,css,handlebars.js,Jquery,Css,Handlebars.js,我正在尝试使用车把JS,到目前为止,它大部分都在工作。然而,我遇到了一个有趣的问题 我试图让Handlebar呈现一个包含三个文本字段的用户输入表单。为了进行测试,我将构建这三个文本字段所需的JSON字符串粘贴到文档中,效果非常好。但是,当我使用$.getJSON并在呈现文本字段时通过ajax调用完全相同的JSON字符串时,表单中没有应用CSS或jQuery规则 我知道这是因为此时调用了documentready,因为我在我的静态字符串周围添加了documentready,同样的事情发生了,他们
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));
}
});
});
动态版本
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>
{{trans#u label}{{{if trans#u description}}
{{trans_description}}{{/if}}
我想出来了
我从一个准备好的文档中删除了大部分javascript代码,并让getJSON调用一个函数,该函数在getJSON运行完毕后执行剩下的javascript