jQuery缓存选择器不能正常工作

Question

使用JavaScript和jQuery，我正在尝试缓存一个选择器到一个对象属性。

保存$("#dnsTitle")到zPanelDNS.cache.dnsTitleId

然而，在我的zPanelDNS.events函数下，你可以看到我在哪里尝试使用选择器和缓存版本。

由于某些原因，缓存版本不像我想象的那样工作。我写了两个选择器控制台日志，他们都找到目标元素，但由于某种原因缓存的版本不工作。

这是2的控制台输出，你可以看到它们略有不同…

$("#dnsTitle") WORKS =

[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();
});

Answer 1

$("#dnsTitle")在调用它时立即查找具有该ID 的元素，并返回一个包含该元素的jQuery对象(如果找到)或一个空对象(如果没有)。当你稍后尝试使用它时，它不会重新查询。显然，在创建创建panelDNS对象的代码时，具有该ID的元素不存在，但是存在之后当按下键时。

这可能有很多原因。例如，如果代码的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>标签之前。这是YUI最佳实践和Google闭包库团队的建议。

---

这段代码有几个其他的问题，尤其是它有一个语法错误，你定义events，你使用PanelDNS和panelDNS互换，但JavaScript是大小写敏感的，所以他们不是同一件事。

这里的代码与上述的变化和修复的其他问题，我注意到，见内联注释与****:

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();
});