0

JavaScript と jQuery を使用して、セレクターをオブジェクト プロパティにキャッシュしようとしています。

に保存$("#dnsTitle")しますzPanelDNS.cache.dnsTitleId

ただし、私のzPanelDNS.events関数では、Selector と Cached バージョンを使用しようとしている場所を確認できます。

何らかの理由で、キャッシュされたバージョンが思ったように機能しません。両方のセレクターをコンソールログに書き込み、両方ともターゲット要素を見つけますが、何らかの理由でキャッシュされたバージョンが機能しません。

2 のコンソールの出力は次のとおりです。わずかに異なることがわかります...

$("#dnsTitle") 作品= 

[div#dnsTitle.account accountTitle, context: document, selector: "#dnsTitle", jquery: "1.9.1", constructor: function, init: function…]

zPanelDNS.cache.dnsTitleId 機能しません= 

[context: document, selector: "#dnsTitle", jquery: "1.9.1", constructor: function, init: function…]

JavaScript...

var panelDNS = {

  unsavedChanges: false,

  init: function () {
    panelDNS.events();
  },


  cache: {
    dnsTitleId: $("#dnsTitle"),
    translation: {
      absolute: 0,
      relative: 0,
      sinceDirectionChange: 0,
      percentage: 0
    }
  },

  events: function() {

    // Activate SAVE and UNDO Buttons when Record Row EDITED
    $(document).on("keydown", "#dnsRecords input" ,function() {

        // Using Selector
        // DOES WORK
        $("#dnsTitle").find(".save, .undo").removeClass("disabled");
        console.log($("#dnsTitle"));

        // Using Cached Selector panelDNS.cache.dnsTitleId
        // DOES NOT WORK
        //panelDNS.cache.dnsTitleId.find(".save, .undo").removeClass("disabled");
        console.log(panelDNS.cache.dnsTitleId);

    });

  }

}

$(function(){
    panelDNS.init();
});
4

1 に答える 1

2

$("#dnsTitle")呼び出すとすぐにその ID を持つ要素を検索し、要素をラップする jQuery オブジェクト (見つかった場合) または空のオブジェクト (見つからない場合) を返します。後で使用しようとすると、再クエリなどは行われません。どうやら、その ID を持つ要素は、panelDNSオブジェクトを作成するコードが作成されたときには存在しませんが、後でキーが押されたときに存在します。

その理由はいくらでもあります。たとえばscript、コードの要素が要素よりも HTML ドキュメントの上位にある場合dnsTitle、それが理由です。ドキュメントのその部分が解析されるまで、要素は存在しません。

たとえば、これはmyElement要素のテキストを青くしません:

<script>
$("#myElement").css("color", "blue");
</script>
<!-- ... -->
<div id="myElement">This text will not turn blue</div>

しかし、これは：

<div id="myElement">This text WILL turn blue</div>
<!-- ... -->
<script>
$("#myElement").css("color", "blue");
</script>

これは、正当な理由がない限り、script要素をドキュメントの下部</body>、終了タグの直前に配置する必要がある多くの理由の 1 つです。これは、 YUI ベスト プラクティスチームとGoogle Closure Libraryチームからの推奨事項です。

そのコードには他にもいくつか問題がありました。特に、 を定義していて、 and を同じ意味で使用していたところに構文エラーがありましたがevents、JavaScript では大文字と小文字が区別されるため、それらは同じではありません。PanelDNSpanelDNS

上記の変更を加えたコードと、私が気づいた他の問題の修正を以下に示します。次のインライン コメントを参照してください****。

var panelDNS = {

  unsavedChanges: false,

  init: function () {
    // **** Removed unnecessary second `ready` call

    // **** Get the element here
    panelDNS.cache.dnsTitleId = $("#dnsTitle");

    // **** Call the `events` function to hook events
    panelDNS.events();

    // (Instead of `panelDNS` above, you could use `this`, but since you
    // only have one `panelDNS` object, it's simpler to use that)
  },


  cache: {
    // **** Removed dnsTitleId here
    translation: {
      absolute: 0,
      relative: 0,
      sinceDirectionChange: 0,
      percentage: 0
    }
  },

  events: function() { // **** Made this a function

    // Activate SAVE and UNDO Buttons when Record Row EDITED
    $(document).on("keydown", "#dnsRecords input" ,function() {

        panelDNS.cache.dnsTitleId.find(".save, .undo").removeClass("disabled");
    });

  }

}

$(function(){
    panelDNS.init();
});
于 2013-04-22T07:01:56.587 に答える