When do I need to reinitialize a jQuery element

Question

On page load I store a reference to a field:

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

Are there any cases where that reference would become "stale" meaning attributes or properties of that input element in the DOM could change and the jQuery element referring to it could no longer carry the correct values?

In other words, in what cases do I need to re-initialize a jQuery object in relation to the underlying DOM element changing?

Answer 1

Are there any cases where that reference would become "stale" meaning attributes or properties of that input element in the DOM could change and the jQuery element referring to it could no longer carry the correct values?

That specific thing won't happen, no. jQuery just contains a set of maching elements. 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 get current information. For instance:

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>

What could happen, but is more rare, is that the element could be replaced with a different element. In that case, jQuery will have a reference to the old element, not the new one:

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>

That's not jQuery-specific, it's true if you're just working with the element directly as well:

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 had some weird behavior in this regard in that it would go through the old elements wiping out their text, but that was seriously non-standard and IE is increasingly obsolete.)

The DOM does offer some live collections where as long as you go back to the collection for the element, you'll get the new one:

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>

The collection (NodeList) you get from querySelectorAll is a snapshot, most others are live collections, such as the ones from getElementsByTagName, getElementsByClassName, or the children or childNodes properties of elements, etc.

Answer 2

jQuery will hold a reference to the actual HTMLElement. As long as this element is in the DOM it will be valid. If you somehow remove the element (or the element was inserted efter you did var firstNameField = $('input[name=firstName]'); eg because of Ajax) you will need to "reinitialize".

Of course you could do stupid stuff like firstNameField[0] = null and overwrite the reference to the element.