Question

使用JavaScript和jQuery我试图缓存选择器到Objects属性。

我将$("#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();
});

Answer 1

当你调用它时，

$("#dnsTitle")查找具有该ID 的元素，并返回包装元素（如果找到）或空元素（如果没有）的jQuery对象。当您稍后尝试使用它时，它不会重新查询。显然，创建panelDNS对象的代码创建后，具有该ID的元素不存在，但是当按下某个键时 / p>

可能有多种原因。例如，如果代码的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 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();
});

jQuery缓存选择器无法正常工作

1 个答案: