Question

这可能是一个非常基本的问题，但我正在尝试理解这种行为

这是我的javascript代码。我想知道为什么第二次调用foo不起作用。这是JSFiddle link

$.fn.foo = function(somestring){
  var $this = this;
  $this.html(somestring);
}

$(function(){
    $('#container').foo("within function"); //this works
});

$('#container').foo("outside"); //this does not

Answer 1

DOM is not完全加载..这就是它不起作用的原因..

因此，当您将代码包含在DOM Ready处理程序中时，它会等待加载文档，然后在其中运行代码。

这可以确保在运行任何代码之前元素可用..

当HTML document is parsed时，它自上而下解析。

因此，如果脚本包含在head部分中，那么首先加载脚本然后加载HTML结构。当你尝试运行代码时，它显然不起作用，因为元素仍然没有被解析。

所以在处理程序中包含它将确保在调用它们上的方法之前元素可用..

Answer 2

这是因为$('#container').foo("outside");在处理body之前进行了评估。 $('#container')将返回长度为0.这将在下面进行说明。

$.fn.foo = function(somestring){
  var $this = this;
  $this.html(somestring);
}

$(function(){
    $('#container').foo("within function");
});

var element = $('#container');
console.log(element.length); //prints 0
element.foo("outside");

Answer 3

如果脚本位于页面的开头，则尚未解析HTML文档的其余部分，因此该文档对于脚本看起来是空的，因此还没有#container。

$(function() { ... });

（大致）等同于

Wait till the whole HTML file is loaded and ready
Then execute function

所以#container会在那里，它会起作用。另一种使其工作的方法是将脚本放在页面的其余部分下面，或者至少放在#container下面。

从不同的上下文中调用JQuery函数

3 个答案: