2016-03-07 72 views
-1

我需要访问$(document).ready()范围内外的元素。

假定以下代码:

var text__holder = $('#text__holder'); 

$(function() { 
    text__holder.text('Inside DOM ready'); 
    /* 
     SOME MORE ACTION WITH ELEMENT 
    */ 
}); 

var writeSomeTxt = function() { 
    text__holder.text('Outside DOM ready'); 
}; 

writeSomeTxt(); 

在这种情况下不能访问该函数内的元素。 JS也在外部.js文件中,该文件包含在页面的<head>部分,我不能在其他地方替换它。

我目前的“解决方法”因为这是:

var text__holder = $('#text__holder'); 

$(function() { 
    text__holder.text('Inside DOM ready'); 
    /* 
     SOME MORE ACTION WITH ELEMENT 
    */ 
}); 

var writeSomeTxt = function() { 
$(function() { 
    text__holder.text('Outside DOM ready'); 
}); 
}; 

writeSomeTxt(); 
+2

确定。你的问题是什么? – David

+0

如果你把这个代码放在''标签之前,它应该可以工作。如果你把它放在''中,那么'#text__holder'元素在你尝试选择它的时候不会存在于DOM中。 –

+2

你知道它在'document'准备好了吗?如果没有DOM,那么不存在的元素将如何存在文本? –

回答

4

的问题很可能是你不能只是这行代码:

var text__holder = $('#text__holder'); 

直到DOM已经被加载。如果你这样做,你只会得到一个空的jQuery对象,因为它找不到任何匹配的DOM对象。

如果你知道writeSomeTxt()不会被调用的DOM加载后,直到,那么你可以这样做:

var text__holder; 

$(function() { 
    text__holder = $('#text__holder'); 
    text__holder.text('Inside DOM ready'); 
    /* 
     SOME MORE ACTION WITH ELEMENT 
    */ 
}); 

var writeSomeTxt = function() { 
    text__holder.text('Outside DOM ready'); 
}; 

// don't call this until after the DOM is loaded 
// presumably based on some DOM event 
writeSomeTxt(); 

但是,真的,有一个在试图缓存没有意义这样的单DOM参考反正所以更好的方式来编写代码会是这样:

$(function() { 
    $('#text__holder').text('Inside DOM ready'); 
    /* 
     SOME MORE ACTION WITH ELEMENT 
    */ 
}); 

var writeSomeTxt = function() { 
    $('#text__holder').text('Outside DOM ready'); 
}; 

// don't call this until after the DOM is loaded 
// presumably based on some DOM event 
writeSomeTxt(); 

或者,如果所有这些代码都应该在页面初始化时运行,那么就把它全部放在.ready()处理程序中。

$(function() { 
    var text__holder = $('#text__holder'); 
    text__holder.text('Inside DOM ready'); 
    /* 
     SOME MORE ACTION WITH ELEMENT 
    */ 

    var writeSomeTxt = function() { 
     text__holder.text('end of DOM ready'); 
    }; 

    writeSomeTxt(); 

}); 
+0

几个月前我问过一个问题,我把功能放在$ (document).ready()。答案是“你为什么要这样做”,“这样一个小白菜”等,而我的问题被降低了。几个星期后,我发布了另一个问题,我没有缓存DOM元素。反应是,“为什么你不缓存DOM元素”......令人惊讶的是我的问题再次降低了。认真地应该使用什么。 – Gabriel

+1

@Gabriel - 如果你正在对同一个函数中的同一个DOM元素进行多次访问,那么将它缓存在本地函数中 - 这被认为是一种好的设计实践,以避免在同一个函数执行中反复调用同一个选择器。很少有很好的理由将其全局缓存,事实上,这可能会导致计时问题,或者如果页面在函数内被修改,只需在需要时进行获取(然后在持续时间内保留该引用该功能)。你也可以在jQuery中链接多个操作。 – jfriend00

+1

@Gabriel - 当它是代码将在页面初始化时运行并且代码需要访问该页面并且无法方便地定位脚本时,应该只将事物放入'$(document).ready()'处理程序中或者从页面末尾的'

2

可以外document.ready声明函数和变量,并定义内的变量以及呼叫功能内部一旦变量被定义:

var text__holder;//declare undefined varible 

$(function() { 

    text__holder = $('#text__holder');// can now define varible 
    text__holder.text('Inside DOM ready');   
    // call function now that variable is defined 
    writeSomeTxt(); 
}); 

var writeSomeTxt = function() { 
    text__holder.text('Outside DOM ready'); 
};