Question

这是我第一次尝试使用phonegap helloworld，也是我第一次尝试单页应用程序。总而言之，我有一个index.html，其id为id＆＃34; subscreen＆＃34;。我也有2个按钮。每个按钮都会将Handlebar模板加载到该DIV中。

问题：当我启动应用程序时，按钮处理程序会立即按顺序触发（我收到屏幕1和屏幕2的警告消息）。当我点击按钮时，没有任何反应，就像事件绑定没有正确完成一样。

也许我的javascript中有错误，但我不知道它是什么！

看看我简单的index.html：

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <script src="js/jquery-2.1.3.min.js"></script>
        <script src="js/handlebars-v3.0.1.js"></script>
        <title>Hello World</title>
    </head>
    <body>
        <div class="app">

            <h1>PhoneGap test</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
            </div>


            <div id="subscreen">This is where we display the subscreens created using the handlebar templates below</div>
            <input class='screen1-key' value="Scr1" type="button"/>
            <input class='screen2-key' value="Scr2" type="button"/>

            <script id="scr1" type="text/x-handlebars-template">
                <div class='header'><h1>This is SCREEN 1</h1></div>
            </script>

            <script id="scr2" type="text/x-handlebars-template">
                <div class='header'><h1>This is SCREEN 2</h1></div>
            </script>
        </div>



        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>
</html>

看看我简单的index.js，我试图在Handizear中在初始化函数中编译我的模板。然后我尝试将keyup事件绑定到我的2个按钮，单击这些按钮时会将模板1或2加载到html页面上的div中。

var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();

        //Kev add handlebars stuff
        this.screen1 = Handlebars.compile($("#scr1").html());
        this.screen2 = Handlebars.compile($("#scr2").html());

    },

    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },

    onDeviceReady: function() {
        app.receivedEvent('deviceready');


        $('.screen1-key').on('keyup', app.renderScreen1());
        $('.screen2-key').on('keyup', app.renderScreen2());


    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    },

    renderScreen1: function () {
        alert("render screen 1");
        $('#subscreen').html(this.screen1());
    },


    renderScreen2: function () {
        alert("render screen 2");
        data = {name: "Mr Wong"};
        $('#subscreen').html(app.screen2(data));
    }
};

Answer 1

此代码触发函数

$('.screen1-key').on('keyup', app.renderScreen1());
$('.screen2-key').on('keyup', app.renderScreen2());

您必须将函数引用传递给事件处理程序，而不是执行函数本身。这些输入也是按钮，因此您必须使用click事件处理程序。

$('.screen1-key').on('click', app.renderScreen1);
$('.screen2-key').on('click', app.renderScreen2);

Phonegap：按钮处理程序意外执行

1 个答案: