0

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

1 回答 1

2

$("#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 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();
});
于 2013-04-22T07:01:56.587 回答