使用JavaScript和jQuery，我试图将Selector缓存到Objects属性。
我将$("#dnsTitle")保存到zPanelDNS.cache.dnsTitleId
但是在我的zPanelDNS.events函数中，您可以看到我在哪里使用选择器和缓存版本。
由于某种原因，缓存的版本无法像我想的那样工作。我将两个选择器都写入控制台日志，它们都找到了目标元素，但是由于某种原因，缓存的版本不起作用。
这是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();
});
最佳答案
$("#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>标记之前。这是YUI Best Practices和Google Closure Library团队的建议。该代码还有其他一些问题，尤其是在您定义
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();
});