Question

在编写一些Javascript时，我通常会预先定义我需要的所有元素，例如。

var $body, $header, $footer, $anInput;

$(document).ready(function () {
  $body = $('body');
  $header = $('div#header');
  $footer = $('div#footer');
  $anInput = $('form#myForm input');
};

现在，如果我做了类似

的事情

$body.html($body.html());

（我知道，没有意义，但可以通过AJAX调用获得）。

我仍然有权使用$header，$footer，$anInput或者我是否应该再次获得参考？

实际上，我的Javascript代码仍然有用，所以我会回答是，但我怀疑我错过了什么。

Answer 1

您的jQuery引用将被删除。因此，如果您决定执行$ body.html（$ body.html（）），您的选择器将全部中断。

$(document).ready(function () {
  $body = $('body');
  $header = $('div#header');
  $footer = $('div#footer');
  
  $footer.html("test 1");
  
  $anInput = $('form#myForm input');
  
  $body.html($body.html());
  
  $footer.html("attempted to change value");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
	<div id="header"></div>
	<div id="footer"></div>
</body>

请注意页脚仍然测试1。

您只需要重新初始化选择器。

$header = $("div#header");

Answer 2

这是因为当使用jQuery.html或Node.innerHTML时，元素的整个内容将被删除并被新内容替换。由于元素（节点）是对象，并且javascript中的对象通过引用传递而不是按值传递，旧引用将指向对象已被删除，因此如果使用，引用将是无用的并且容易出错。

您可以存储选择器而不是jQuery对象，并使用$(...)，如下所示：

header = 'div#header'; footer = 'div#footer'; anInput = 'form#myForm input'; $(header)....; $(anInput)....; // ...

或者每次更改HTML时更新对象都是更好的，因为这样你就可以减少$(...)次，这是性能上的一个好处。

Answer 3

您可以自己检查：引用仍然指向可以根据需要操作它们的对象，但它们引用的对象不再位于DOM中，因此它们不会影响您在浏览器中看到的任何内容。并且附加到正文中任何元素的任何事件侦听器也被删除，因此您必须附加新的元素。你的选择：

获取对隐式插入的DOM元素的新引用（或在你的情况jQuery包装他们）每次。这真的变了随着复杂性的增加和组件的变化，难以维护。
保持组件更新更具原子性，以便您永远不会替换整个DOM 元素，仅修改文本或属性值。好的经验法则。
或者总是再次渲染整个页面（附加侦听器等）权威国家。这可能意味着不使用无框架 jQuery了。

元素替换后引用JQuery对象

3 个答案: