0

これは非常に基本的な質問かもしれませんが、私はこの動作を理解しようとしています

これは私のJavaScriptコードです。fooへの2回目の呼び出しが機能しない理由を知りたいです。これが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

スクリプトがページの先頭にある場合、残りのHTMLドキュメントはまだ解析されていないため、ドキュメントはスクリプトに対して空に見えるため、＃containerはまだありません。

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

と（ほぼ）同等です

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

したがって、＃containerが存在し、機能します。それを機能させる別の方法は、スクリプトをページの残りの部分の下、または少なくとも#containerの下に配置することです。

于 2012-12-04T23:49:52.927 に答える
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 に答える