0

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

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

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

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

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

3 回答 3

1

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

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

这确保元素在其上运行任何代码之前可用。

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

因此，如果脚本包含在 head 部分中，则首先加载脚本，然后加载 HTML 结构。当您尝试运行代码时，它显然无法正常工作，因为该元素仍未被解析。

因此，将其封装在处理程序中将确保元素在调用它们的方法之前可用。

于 2012-12-04T23:29:15.057 回答
0

这是因为在处理$('#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");
于 2012-12-04T23:32:22.667 回答
0

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

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

（大致）相当于

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

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

于 2012-12-04T23:49:52.927 回答