无法仅在phonegap的第一页调用onclick事件

时间:2015-03-16 19:54:37

标签: android jquery cordova onclick

我正在使用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>

2 个答案:

答案 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");
});
});

这将解决您的问题。