我什么時候需要重新初始化 jQuery 元素

Question

在頁面加載時，我存儲對字段的引用：

var firstNameField = $('input[name=firstName]');

在任何情況下，該引用會變得“陳舊”，這意味着DOM中該輸入元素的屬性或屬性可能會發生變化，並且引用它的jQuery元素不能再攜帶正確的值？

換句話說，在什么情況下我需要重新初始化與底層DOM元素更改相關的jQuery object？

Answer 1

jQuery 將持有對實際HTMLElement的引用。 只要此元素在 DOM 中，它就有效。 如果您以某種方式刪除了元素（或者在您執行var firstNameField = $('input[name=firstName]');例如因為 Ajax）之后插入了元素，您將需要“重新初始化”。

當然你可以做一些愚蠢的事情，比如firstNameField[0] = null並覆蓋對元素的引用。

Answer 2

在任何情況下，該引用會變得“陳舊”，這意味着 DOM 中該輸入元素的屬性或屬性可能會發生變化，並且引用它的 jQuery 元素不能再攜帶正確的值？

那具體的事情不會發生，不。 jQuery 僅包含一組加工元素。 Those are the actual elements, so if their state changes (for instance, an attribute is changed, etc.), when you go to get that piece of state information from your jQuery set, it will go to the actual DOM element, and thus獲取當前信息。 例如：

 const d = $("#target"); console.log("before", d.attr("data-example")); // undefined // Change it without using jQuery document.getElementById("target").setAttribute("data-example", "updated"); console.log("after ", d.attr("data-example")); // "updated"

 <div id="target"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

可能發生但更罕見的情況是該元素可以替換為不同的元素。 在這種情況下， jQuery 將引用舊元素，而不是新元素：

 const s = $("#wrapper span"); console.log("before", s.text()); // "This is the initial span" // Completely replace that span with a different element $("#wrapper").html("<span>This is the new span</span>"); // The jQuery set is still referring to the old span element console.log("before", s.text()); // "This is the initial span"

 <div id="wrapper"> <span>This is the initial span</span> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

這不是特定於 jQuery 的，如果您也直接使用該元素，這是正確的：

 const s = document.querySelector("#wrapper span"); console.log("before", s.textContent); // "This is the initial span" // Completely replace that span with a different element document.getElementById("wrapper").innerHTML = "<span>This is the new span</span>"; // `s` is still referring to the old span element console.log("before", s.textContent); // "This is the initial span"

 <div id="wrapper"> <span>This is the initial span</span> </div>

（IE 在這方面有一些奇怪的行為，它會 go 通過清除其文本的舊元素，但這嚴重不標准，IE 越來越過時。）

DOM 確實提供了一些實時的 collections ，只要您將 go 返回到該元素的集合，您就會得到新的：

 const wrapper = document.getElementById("wrapper"); const col = wrapper.getElementsByTagName("span"); // Live collection console.log("before", col[0].textContent); // "This is the initial span" // Completely replace that span with a different element wrapper.innerHTML = "<span>This is the new span</span>"; // `col`'s contents are updated dynamically when the DOM changes console.log("before", col[0].textContent); // "This is the new span"

 <div id="wrapper"> <span>This is the initial span</span> </div>

您從querySelectorAll獲得的集合 ( NodeList ) 是一個快照，其他大多數是實時 collections，例如來自getElementsByTagName 、 getElementsByClassName的集合，或者元素的children或childNodes屬性等。