我正在使用cordova phonegap制作Android应用程序。在第一页中,我尝试使用带按钮的输入元素:
$(document).ready(init());
和
document.addEventListener("deviceready", onDeviceReady, false);
输入元素:
<input type="button" id="task_btn" value="Button" />
点击活动:
$("#download_btn").click(function() {
console.log("index.html >> task button clicked");
}
但它不起作用;但是,在第二页中,它运作良好 元素ID是正确定义的。
如何解决这个问题?
html页面上的完整代码:
<!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 Is Ready To Use');
document.addEventListener("deviceready", onDeviceReady, false);
});
function onDeviceReady() {
// $('#message').append('<br />'+'Device Is Ready To 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>
答案 0 :(得分:1)
我解决了 输入按钮更改为:
<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()"/>
和功能:
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');
}
谢谢你的回答。
答案 1 :(得分:0)
要使其与click事件一起运行,您必须在document.ready函数中提及您的click事件。
$(document).ready(function(){
init();
$("#download_btn").click(function() {
console.log("index.html >> task button clicked");
});
});
这将解决您的问题。