jQuery:预引用元素句柄作为动态添加元素的变量

时间:2014-08-30 12:35:35

标签: jquery dynamic elements

我试图通过声明我需要使用的所有元素作为变量初始化来使我的代码更整洁,如下所示:

var templateDiv = $(".enquiry-step");
var holder      = $("#template-holder");

但是,其中一些元素实际上并不存在于页面上。在我添加它们(使用ajax)之后,当我尝试执行以下操作时:

templateDiv.fadeIn(250);

它不起作用,但确实如此:

$(".enquiry-step").fadeIn(250);

我认为这是因为var templateDiv = $(".enquiry-step");实际上比我想象的更多 - 即。创建一个具有从该元素派生的各种属性的对象...如果该元素在DOM中尚不存在则无法做到?我是对的吗?

如果是这样,那么还有其他方法可以将句柄设置为变量,还是只需要在我的代码中继续引用这些元素,如$(".enquiry-step")

编辑:动态创建元素后使用console.log()会显示以下内容:

的console.log(templateDiv):

Object { length: 0, prevObject: Object, context: HTMLDocument → enquiries, selector: ".enquiry-step" }

的console.log($( “询问步。”));

Object { 0: <div.uk-grid.enquiry-step>, length: 1, prevObject: Object, context: HTMLDocument → enquiries, selector: ".enquiry-step" }

注意区别......我不明白为什么?

1 个答案:

答案 0 :(得分:0)

$(".enquiry-step")

对$()的调用会调用返回给您的jQuery对象的创建。基本上它是由选择器计算的dom元素的包装器。如果在创建对象时元素不存在,则包装器在那里,但它不引用任何DOM元素(参见.length为0),并且它不会观察DOM树以便在这些时更新自身元素出现,例如它完全是静态的。我建议你简单地声明你的变量

var holder;

并且仅在元素在DOM中的时刻为其分配值

holder= $(".enquiry-step");

基本上调用$()就像进行数据库查询一样 - 只有在数据库已经存在的情况下才会返回结果。