[ad_1]
\n<\/p>\n
The element you were trying to find wasn\u2019t in the DOM<\/a> when your script ran.<\/p>\n The position of your DOM-reliant script can have a profound effect on its behavior. Browsers parse HTML documents from top to bottom. Elements are added to the DOM and scripts are (generally) executed as they’re encountered. This means that order matters.<\/strong> Typically, scripts can’t find elements that appear later in the markup because those elements have yet to be added to the DOM.<\/p>\n Consider the following markup; script #1 fails to find the So, what should you do? You’ve got a few options:<\/p>\n Given what we’ve seen in the example above, an intuitive solution might be to simply move your script down the markup, past the elements you’d like to access. In fact, for a long time, placing scripts at the bottom of the page was considered a best practice<\/a> for a variety of reasons. Organized in this fashion, the rest of the document would be parsed before executing your script:\n<\/p>\n While this makes sense and is a solid option for legacy browsers, it’s limited and there are more flexible, modern approaches available.<\/p>\n While we did say that scripts are, “(generally) executed as they’re encountered,”<\/em> modern browsers allow you to specify a different behavior. If you’re linking an external script, you can make use of the [ This means that you can place a script tagged with Just keep in mind…<\/p>\n Depending upon your requirements, you may be able to utilize JavaScript modules<\/a>. Among other important distinctions from standard scripts (noted here<\/a>), modules are deferred automatically and are not limited to external sources.<\/p>\n Set your script’s Add a listener to an event that fires after your document has been parsed.<\/p>\n The You can pass your ready handler directly to jQuery as Delegate the event handling to an ancestor of the target element.<\/p>\n When an element raises an event (provided that it’s a bubbling<\/a> event and nothing stops its propagation), each parent in that element’s ancestry, all the way up to Typically, this pattern is reserved for elements that don’t exist at load time or to avoid attaching a large number of duplicate handlers. For efficiency, select the nearest reliable ancestor of the target element rather than attaching it to the jQuery makes this functionality available through <div><\/code> while script #2 succeeds:<\/p>\n<\/p>\n<script>\n console.log(\"script #1:\", document.getElementById(\"test\")); \/\/ null\n<\/script>\n<div id=\"test\">test div<\/div>\n<script>\n console.log(\"script #2:\", document.getElementById(\"test\")); \/\/ <div id=\"test\" ...\n<\/script><\/code><\/pre>\n<\/div>\n<\/div>\n
\nOption 1: Move your script<\/h2>\n
<body>\n <button id=\"test\">click me<\/button>\n <script>\n document.getElementById(\"test\").addEventListener(\"click\", function() {\n console.log(\"clicked:\", this);\n });\n <\/script>\n<\/body><!-- closing body tag --><\/code><\/pre>\n<\/div>\n<\/div>\n
\nOption 2: The
defer<\/code> attribute<\/h2>\ndefer<\/code><\/a> attribute.<\/p>\n\n
defer<\/code>, a Boolean attribute,] is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing DOMContentLoaded<\/code><\/a>.<\/p>\n<\/blockquote>\ndefer<\/code> anywhere, even the <head><\/code>, and it should have access to the fully realized DOM.<\/p>\n<\/p>\n<script src=\"https:\/\/gh-canon.github.io\/misc-demos\/log-test-click.js\" defer><\/script>\n<button id=\"test\">click me<\/button><\/code><\/pre>\n<\/div>\n<\/div>\n\n
defer<\/code> can only be used for external scripts, i.e.: those having a src<\/code> attribute.<\/li>\n
\nOption 3: Modules<\/h2>\n
type<\/code> to module<\/code>, e.g.:<\/p>\n<\/p>\n<script type=\"module\">\n document.getElementById(\"test\").addEventListener(\"click\", function(e) {\n console.log(\"clicked: \", this);\n });\n<\/script>\n<button id=\"test\">click me<\/button><\/code><\/pre>\n<\/div>\n<\/div>\n
\nOption 4: Defer with event handling<\/h2>\n
DOMContentLoaded event<\/h3>\n
DOMContentLoaded<\/code><\/a> fires after the DOM has been completely constructed from the initial parse, without waiting for things like stylesheets or images to load.<\/p>\n<\/p>\n<script>\n document.addEventListener(\"DOMContentLoaded\", function(e){\n document.getElementById(\"test\").addEventListener(\"click\", function(e) {\n console.log(\"clicked:\", this);\n });\n });\n<\/script>\n<button id=\"test\">click me<\/button><\/code><\/pre>\n<\/div>\n<\/div>\nWindow: load event<\/h3>\n
load<\/code><\/a> event fires after DOMContentLoaded<\/code> and additional resources like stylesheets and images have been loaded. For that reason, it fires later than desired for our purposes. Still, if you’re considering older browsers like IE8, the support is nearly universal. Granted, you may want a polyfill for addEventListener()<\/code><\/a>.<\/p>\n<\/p>\n<script>\n window.addEventListener(\"load\", function(e){\n document.getElementById(\"test\").addEventListener(\"click\", function(e) {\n console.log(\"clicked:\", this);\n });\n });\n<\/script>\n<button id=\"test\">click me<\/button><\/code><\/pre>\n<\/div>\n<\/div>\njQuery’s
ready()<\/code><\/h3>\nDOMContentLoaded<\/code> and window:load<\/code> each have their caveats. jQuery’s ready()<\/code><\/a> delivers a hybrid solution, using DOMContentLoaded<\/code> when possible, failing over to window:load<\/code> when necessary, and firing its callback immediately if the DOM is already complete.<\/p>\n$(handler<\/em>)<\/code>, e.g.:<\/p>\n<\/p>\n<script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.js\" integrity=\"sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=\" crossorigin=\"anonymous\"><\/script>\n<script>\n $(function() {\n $(\"#test\").click(function() {\n console.log(\"clicked:\", this);\n });\n });\n<\/script>\n<button id=\"test\">click me<\/button><\/code><\/pre>\n<\/div>\n<\/div>\n
\nOption 5: Event Delegation<\/h2>\n
window<\/code>, receives the event as well. That allows us to attach a handler to an existing element and sample events as they bubble up from its descendants… even from descendants added after the handler was attached. All we have to do is check the event to see whether it was raised by the desired element and, if so, run our code.<\/p>\ndocument<\/code>.<\/p>\nNative JavaScript<\/h3>\n<\/p>\n
<div id=\"ancestor\"><!-- nearest ancestor available to our script -->\n <script>\n document.getElementById(\"ancestor\").addEventListener(\"click\", function(e) {\n if (e.target.id === \"descendant\") {\n console.log(\"clicked:\", e.target);\n }\n });\n <\/script>\n <button id=\"descendant\">click me<\/button>\n<\/div><\/code><\/pre>\n<\/div>\n<\/div>\njQuery’s
on()<\/code><\/h3>\non()<\/code><\/a>. Given an event name, a selector for the desired descendant, and an event handler, it will resolve your delegated event handling and manage your this<\/code> context:<\/p>\n<\/p>\n