dojo -- it is critical to pull in "dojo/domReady!"

来源：互联网发布：360企业版软件管家编辑：程序博客网时间：2024/06/10 22:50

Issue: Can not get handler of an element by using dojo.byId(“element id”) ;

You want to add an event to a button, code goes like this:

<script>require(["dojo","dojo/on","dijit/registry","dojo/dom",  "dojox/mobile",  "dojox/mobile/parser",  "dojox/mobile/SwapView",  "dojox/mobile/PageIndicator",  "dojox/mobile/Heading","dojox/mobile/ScrollableView",  "dojox/mobile/EdgeToEdgeList","dojox/mobile/Button”],function(dojo,on,registry,dom){     var handler = dojo.byId("btn");     on(handler, "click", function(e){           alert("i am clicked");     });});</script>     <script type="text/javascript" src="engmain.js"></script> </head><body style="visibility:hidden">     <div id="mainview" class="mainview" data-dojo-type="dojox/mobile/ScrollableView">         <button id="btn" data-dojo-type="dojox/mobile/Button">click me           <img src="images/bottomarrow.png"/>     </button>     <div id="result" ></div>                maincontent     </div></body>

No matter how hard you clicked the button, the button just did not give you any response.

And you will see this in your debugging environment (FireBug) –target is null

Possible Cause:

DOM tree didn't ready when dojo.byId(“elementID” executed, so the element you specified cannot be identified.

Reference: http://www.jetwu.cn/archives/101

Solution:

Ensure that you pull indojo/domReady! when you need to do something with element of the DOM tree.

The code is as below, for your reference.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"        "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>slip view</title><link rel="stylesheet" href=""><script type="text/javascript" src="dojox/mobile/deviceTheme.js"></script><script type="text/javascript" src="dojo/dojo.js"     data-dojo-config="isDebug:false, parseOnLoad: true, debugAtAllCosts:false"></script><script>require(["dojo","dojo/on","dijit/registry","dojo/dom",  "dojox/mobile",  "dojox/mobile/parser",  "dojox/mobile/SwapView",  "dojox/mobile/PageIndicator",  "dojox/mobile/Heading","dojox/mobile/ScrollableView",  "dojox/mobile/EdgeToEdgeList","dojox/mobile/Button","dojo/domReady!"],function(dojo,on,registry,dom){var handler = dojo.byId("btn");on(handler, "click", function(e){alert("i am clicked");});});</script><script type="text/javascript" src="engmain.js"></script></head><body style="visibility:hidden"><div id="mainview" class="mainview" data-dojo-type="dojox/mobile/ScrollableView"><button id="btn" data-dojo-type="dojox/mobile/Button">click me<img src="images/bottomarrow.png"/></button><div id="result" ></div>main content</div></body></html>

0 0