Question

我有一个非常简单的测试phonegap + jquery移动应用程序。这是简单的形式。代码如下：

    <!-- Styles -->
    <link type="text/css" rel="stylesheet" href="jquery-ui-mobile/jquery.mobile-1.3.1.min.css">

    <!-- jQuery and jQuery Mobile -->
    <script src="https://d10ajoocuyu32n.cloudfront.net/jquery-1.9.1.min.js"></script>
    <script src="jquery-ui-mobile/jquery.mobile-1.3.1.min.js"></script>

    <!-- Extra Codiqa features -->
    <script src="https://d10ajoocuyu32n.cloudfront.net/codiqa.ext.js"></script>

    <!-- Socket.IO -->
    <script src="socket.io/socket.io.js"></script>

</head>
<body>

    <div data-role="page" id="page1">
            <div id="register_button" data-role="button" data-transition="slide">
                Register
            </div>
    </div>
</body>

<script>
    $(document).on('pageinit','[data-role=page]',function(){
        $('#register_button').click(function(){
            $('#error_message_label').text('E-mail not set.');
            $('#error_message').show();
        });
    });
</script>

<!--<script src="js/user/register.js"></script>-->

该脚本似乎没有在设备上运行。单击按钮时没有任何反应。

Answer 1

这应该有效：

将您的脚本块移动到页面div中，如下所示：

<div data-role="page" id="page1">
    <div id="register_button" data-role="button" data-transition="slide">
        Register
    </div>
    <script>
        $(document).on('pageinit','[data-role="page"]',function(){
            $('#register_button').click(function(){
                $('#error_message_label').text('E-mail not set.');
                $('#error_message').show();
            });
        });
    </script>            
</div>

同时更改您的点击处理，以便最终代码如下所示：

<div data-role="page" id="page1">
    <div id="register_button" data-role="button" data-transition="slide">
        Register
    </div>
    <script>
        $(document).on('pageinit','[data-role="page"]',function(){
            $(document).on('click','#register_button', function(){
                $('#error_message_label').text('E-mail not set.');
                $('#error_message').show();
            });
        });
    </script>            
</div>

编辑：

为什么它应该在页面里面div只是一种预感。你没有解释你的app如何工作，所以它让我思考。 jQuery Mobile有一个人们通常不了解的常见问题，它在官方文档中没有描述。如果您使用多个HTML文件，则只有第一个HTML文件将完全加载到DOM中，每个其他页面将仅加载页面div，jQuery Mobile将丢弃其他所有内容。阅读更多相关信息here。

其他可能性是点击事件的问题。问题是，如果平台很慢，有时单击事件将不会绑定到正确的对象。这就是我使用委托点击绑定的原因。它会将click事件绑定到文档，稍后它会将它传播到正确的元素。基本上，DOM中是否存在元素并不重要，因为这种绑定只关心文档对象。

Answer 2

请尝试以下代码：

$(document).ready(function(){
    $('#register_button').on.('click',function(){
            $('#error_message_label').text('E-mail not set.');
            $('#error_message').show();
    });
}

Phonegap（+ jquery mobile）应用程序在浏览器上运行正常，但在设备上无效

2 个答案: