dojo -- it is critical to pull in "dojo/domReady!"
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 in dojo/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>