android - unable to call onclick event only at first page in phonegap -
i'm using cordova phonegap make android app. in first page i'm trying use input elements button:
$(document).ready(init());
and:
document.addeventlistener("deviceready", ondeviceready, false);
input element:
<input type="button" id="task_btn" value="button" />
click event:
$("#download_btn").click(function() { console.log("index.html >> task button clicked"); }
but doesn't work; however, in second page works well.
element ids defined correctlly.
how solve problem?
full code on html page :
<!doctype html> <html> <head> <title>home page</title> <meta charset="utf-8"> <link rel="stylesheet" href="js/jquery.mobile-1.3.1.min.css"> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/jquery.mobile-1.3.1.min.js"></script> <script src="js/cordova.js"></script> <style type="text/css"> .main { margin:0 auto; width:100%; height: 100%; } .button_main { margin-left:1%; width:20%; height: 20%; padding-top: 3%; padding-bottom: 3%; background-color: #fbe26f; float: left; } .button_right { margin-left: 8.75%; margin-right: 8.75%; width:20%; height: 20%; padding-top: 3%; padding-bottom: 3%; background-color: #fbe26f; float: left; } .p_tag { margin-left: auto; margin-top: 5%; margin-right: auto; text-align: right; color: #194b7e; width:90%; font: italic bold 25px/30px georgia, serif; background-color: #d0d0d0; word-wrap: break-word; } </style> </head> <body> <div class="main" align="center"> <div id="button_keeper" align="center"> <input type="button" id="contact_btn" value="contact us" /> <input type="button" id="product_btn" value="product" /> <input type="button" id="about_btn" value="about us" /> <!--<a href="view.html?status=1" rel="external"><div id="contact_btn" class="button_main">contact us</div></a>--> <!--<a href="view.html?status=2" rel="external"><div id="product_btn" class="button_main">product</div></a>--> <!--<a href="view.html?status=3" rel="external"><div id="about_btn" class="button_main">about us</div></a>--> </div> <p id="message" class="p_tag"></p> </div> <script type="text/javascript"> $( document ).ready(function() { // $('#message').append('device ready use'); document.addeventlistener("deviceready", ondeviceready, false); }); function ondeviceready() { // $('#message').append('<br />'+'device ready use'); } $("#contact_btn").click(function() { console.log("index.html >> button clicked : "); $('#message').append('contact button clicked'); }); $("#about_btn").click(function() { console.log("index.html >> button clicked : "); $('#message').append('about button clicked'); }); $("#product_btn").click(function() { console.log("index.html >> button clicked : "); $('#message').append('products button clicked'); }); </script> </body>
i solved input buttons changed :
<input type="button" id="contact_btn" value="contact us" onclick="contactclicked()" /> <input type="button" id="product_btn" value="product" onclick="contactclicked()"/> <input type="button" id="about_btn" value="about us" onclick="contactclicked()"/>
and functions :
function contactclicked() { console.log("index.html >> button clicked ."); $('#message').html('contact button clicked'); } function productclicked() { console.log("index.html >> button clicked : "); $('#message').html('products button clicked'); } function aboutclicked() { console.log("index.html >> button clicked : "); $('#message').html('about button clicked'); }
thank answers.
Comments
Post a Comment