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","dojox/mobile/Button","dojo/domready!"
],dom){
	var handler = dojo.byId("btn");	
	on(handler,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>

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

相关文章