0


0

理解できないキャッシュされたJqueryセレクターの動作

次のコードを考えると、なぜ「a」と「b」の値が異なるのですか? 私は彼らが同じことを返すと思っていただろう:

(function() {
    var a = $('#foo');

    var Test = function(){
    console.log(a); //outputs 'jQuery()'
    var b = $('#foo');
    console.log(b); //outputs 'jQuery(select#foo)' which is what I want
    };
})();

この質問は、頻繁に使用されるセレクターをvarsに固定しようとすることに由来します。 もともと私は各メソッドでそれをしていました(上記の例の `var b`でしたように)が、複数のメソッドでセレクターを使用する必要があることがわかったので、割り当てを利用可能に移動しました(またはそう思いました)その匿名関数のすべてのメソッドに。 ご覧のとおり、機能しません。 どうしてこれなの?

編集:このコードは、クリックによってトリガーされるメソッドによってロードされます。 id fooはページのロード時に存在し、動的に設定または変更されません。

2 Answer


1


ページの読み込みが完了するまで、コードが呼び出されないようにしてください!

$(function() {
  // your code
});

また、もちろん、クライアント側アプリケーションの他の部分によってページ上で変更される可能性のあるものをキャッシュすることに注意する必要があります。


1


前の答えを改善するために-テスト関数を呼び出したときにのみ、おそらくページがロードされた後にのみbが評価されます。 セレクターをドキュメント内にキャッシュします:

 $(document).ready(function(){
   var a = $('#foo');
 });

コードのブロック内で同じセレクターを使用している場合にのみ、セレクターをキャッシュします。 これには$ variable命名規則を使用します。

var $divs = $('div');

セレクターをキャッシュする必要を回避するために、関数を連結することもできます。

$('div').append('hello world').addclass('hello').show();