onDeviceReady()可以工作但是document.addEventListener(“deviceready”,onDeviceReady(),false);失败。为什么?

时间:2013-10-01 20:18:57

标签: javascript html cordova

以下是我的剧本:

<script>
var candata = {cantitle:"", candetail:"", imagesource:"", canlat:"", canlon:""};
    var cantemplate = '<input type="text" name="cantitle" id="cantitle" value="{{cantitle}}" placeholder="can Title"/><textarea cols="40" rows="8" name="candetail" id="candetail" placeholder="can Detail">{{candetail}}</textarea><input id="addphoto" type="button" data-icon="plus" value="Add a Photo" /><img id="canimage" src="{{imagesource}}" /><div id="map">Map Placeholder</div><input id="savecan" type="button" data-theme="a" value="Save can" />';

    $(document).on("pageinit", function(){
        $("#newcan").on("pagecreate", function(){
            var html = Mustache.to_html(cantemplate);
            $("#candetailcontent").html(html);
        });
    });

function init() {
        document.addEventListener("deviceready", onDeviceReady(), false);
    }

    function onDeviceReady() {
        alert('Ready');  //Not being called
        var networkstate = navigator.network.connection.type;
        if(networkstate="none"){
            $("#offline").css("visibility", "visible");
        }
    }
</script>

onDeviceReady()中的警报会触发,但是如果我将文档的addEventListener更改为document.addEventListener("deviceready", onDeviceReady, false);,警报将不会触发。为什么呢?

修改

完整代码:为什么我的onDeviceReady没有触发?

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <meta name="format-detection" content="telephone-no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi">
    <title>Our Application</title>
    <link rel="stylesheet" href="css/themes/default/jquery.mobile-1.3.2.min.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="js/jquery.js"></script>
    <script src="js/jquery.mobile-1.3.2.min.js"></script>
    <script src="cordova.ios.js"></script>
    <script src="js/mustache.js"></script>
    <script>
    var candata = {cantitle:"", candetail:"", imagesource:"", canlat:"", canlon:""};
        var cantemplate = '<input type="text" name="cantitle" id="cantitle" value="{{cantitle}}" placeholder="can Title"/><textarea cols="40" rows="8" name="candetail" id="candetail" placeholder="can Detail">{{candetail}}</textarea><input id="addphoto" type="button" data-icon="plus" value="Add a Photo" /><img id="canimage" src="{{imagesource}}" /><div id="map">Map Placeholder</div><input id="savecan" type="button" data-theme="a" value="Save can" />';

        $(document).on("pageinit", function(){
            $("#newcan").on("pagecreate", function(){
                var html = Mustache.to_html(cantemplate);
                $("#candetailcontent").html(html);
            });
        });

    function init() {
            document.addEventListener("deviceready", onDeviceReady, false);
        }

        function onDeviceReady() {
            alert('Ready');  //Not being called
            var networkstate = navigator.network.connection.type;
            if(networkstate="none"){
                $("#offline").css("visibility", "visible");
            }
        }
    </script>
    </head>
    <body onload="init()">
<div data-role="page" id="main">
      <div data-role="header" class="logo"> <img src="img/logo.png" /> </div>
      <div data-role="content">
    <ul id="canlist" data-role="listview">
        </ul>
    <a href="#newcan" data-role="button" data-icon="plus">New can</a> </div>
      <div data-role="footer" data-theme="c">
    <h2 class="offline">Offline Mode</h2>
  </div>
    </div>
<div data-role="page" id="newcan">
      <div data-role="header" class="logo"> <img src="img/logo.png" /> </div>
      <div id="candetailcontent" data-role="content"> </div>
      <div data-role="footer" data-theme="c">
    <p>Snapcan!</p>
  </div>
    </div>
</body>
</html>

1 个答案:

答案 0 :(得分:5)

您的第一份功能声明:

function init() { document.addEventListener("deviceready", onDeviceReady(), false); }

凭借onDeviceReady之后的括号,调用该函数并将返回值计算为addEventListener的参数,而第二个版本:

document.addEventListener("deviceready", onDeviceReady, false);

忽略括号,因此引用函数