javascript - Why does jQuery or a DOM method such as getElementById not find the element? -


what possible reasons document.getelementbyid, $("#id") or other dom method / jquery selector not finding elements?

example problems include:

jquery silently failing bind event handler, , standard dom method returning null resulting in error:

uncaught typeerror: cannot set property '...' of null

the element trying find wasn’t in dom when script ran.

the position of dom-reliant script can have profound effect upon behavior. browsers parse html documents top bottom. elements added dom , scripts (generally) executed they're encountered. this means order matters. typically, scripts can't find elements appear later in markup because elements have yet added dom.

consider following markup; script #1 fails find <div> while script #2 succeeds:

<script>    console.log("script #1: %o", document.getelementbyid("test")); // null  </script>  <div id="test">test div</div>  <script>    console.log("script #2: %o", document.getelementbyid("test")); // <div id="test" ...  </script>

so, should do? you've got few options:

option 1: move script

move script further down page, before closing body tag. organized in fashion, rest of document parsed before script executed:

<body>    <button id="test">click me</button>    <script>      document.getelementbyid("test").addeventlistener("click", function() {        console.log("clicked: %o", this);      });    </script>  </body><!-- closing body tag -->

note: placing scripts @ bottom considered best practice.

option 2: jquery's ready()

defer script until dom has been parsed, using ready():

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script>    $(document).ready(function() {      $("#test").click(function() {        console.log("clicked: %o", this);      });    });  </script>  <button id="test">click me</button>

note: bind domcontentloaded or window.onload each has caveats. jquery's ready() delivers hybrid solution.

option 3: event delegation

delegated events have advantage can process events descendant elements added document @ later time.

when element raises event (provided it's bubbling event , nothing stops propagation), each parent in element's ancestry receives event well. allows attach handler existing element , sample events bubble descendants... added after handler attached. have check event see whether raised desired element and, if so, run our code.

jquery's on() performs logic us. provide event name, selector desired descendant, , event handler:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script>    $(document).on("click", "#test", function(e) {      console.log("clicked: %o",  this);    });  </script>  <button id="test">click me</button>

note: typically, pattern reserved elements didn't exist @ load-time or avoid attaching large amount of handlers. it's worth pointing out while i've attached handler document (for demonstrative purposes), should select nearest reliable ancestor.

option 4: defer attribute

use defer attribute of <script>.

[defer, boolean attribute,] set indicate browser script meant executed after document has been parsed.

<script src="https://gh-canon.github.io/misc-demos/log-test-click.js" defer></script>  <button id="test">click me</button>

for reference, here's code external script:

document.getelementbyid("test").addeventlistener("click", function(e){    console.log("clicked: %o", this);  });

note: defer attribute seems magic bullet but it's important aware of caveats...
1. defer can used external scripts, i.e.: having src attribute.
2. aware of browser support, i.e.: buggy implementation in ie < 10


Comments

Post a Comment

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

i'm implementing inapp billing in android app. works well, however, i'm trying decouple broadcast receiver activity manifest. suggestion in android's trivialdrive sample: // important: dynamically register broadcast messages updated purchases. // register receiver here instead of <receiver> in manifest // because call getpurchases() @ startup, therefore can ignore // broadcasts sent while app isn't running. // note: registering listener in activity bad idea, done here // because sample. regardless, receiver must registered after // iabhelper setup, before first call getpurchases(). currently there's class extends broadcastreceiver : public class iabbroadcastreceiver extends broadcastreceiver { /** * intent action receiver should filter for. */ public static final string action = "com.android.vending.billing.purchases_updated"; private final iabbroadcastlistener mlistener; public iabbroadcastreceiver(iabbroadcastlistener listener) { m...
Read more

python Tkinter Capturing keyboard events save as one single string -

is possible store keyboard events 1 string? code below stores 1 char , prints it. card reader or bar code reader, contains collection of character/ string not 1 character @ time. goal save char pressed text variable. from tkinter import * root = tk() def key(event): text= event.char text+= event.char print ("pressed", text) def callback(event): frame.focus_set() print ("clicked at", event.x, event.y) frame = frame(root, width=100, height=100) frame.bind("<key>", key) frame.bind("<button-1>", callback) frame.pack() root.mainloop() currently, creating text variable , everytime key() function gets called, , text stores last character typed. you can define text module level variable , , use module level text inside key function - text = '' def key(event): global text text+= event.char print("pressed", text)
Read more

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -

here tables: create table customer ( cid int primary key, name varchar(32) ) create table ord ( oid int primary key, cid int foreign key references customer, address varchar(20) ) here's linq-to-sql statement: var aaa = c in db.customer select new { c, o = c.ord.tolist() }; and here's inexplicable query generated linq-to-sql: select [t0].[cid] [cid], [t0].[name] [name], [t1].[oid] [oid], [t1].[cid] [cid2], [t1].[address] [address], (select count(*) [dbo].[ord] [t2] [t2].[cid] = [t0].[cid]) [value] [dbo].[customer] [t0] left outer join [dbo].[ord] [t1] on [t1].[cid] = [t0].[cid] order [t0].[cid], [t1].[oid] i want understand how rid of count(*) part. it's entirely uncalled for! linq needs count(*) in order determine number of entries returned o = c.ord.tolist() .
Read more