Phonegap（+ jquery mobile）应用程序在浏览器上运行良好，但在设备上运行良好答案

【问题标题】：Phonegap ( + jquery mobile) app works fine on browser but not on devicePhonegap（+ jquery mobile）应用程序在浏览器上运行良好，但在设备上运行良好
【发布时间】：2013-05-27 08:41:13
【问题描述】：

我有一个非常简单的测试 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>-->

脚本似乎无法在设备上运行。当我点击按钮时没有任何反应。

【问题讨论】：

标签： jquery jquery-mobile cordova jquery-mobile-button

【解决方案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 中只是一种预感。你没有解释你的应用程序是如何工作的，所以它让我思考。 jQuery Mobile 有一个人们通常不知道的常见问题，它根本没有在官方文档中描述。如果您使用多个 HTML 文件，只有第一个 HTML 文件会完全加载到 DOM 中，其他每个页面将仅加载页面 div，而 jQuery Mobile 将丢弃所有其他内容。阅读更多关于它的信息here。

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

【讨论】：

我在我的答案中添加了描述。查看并询问您是否还有其他问题。
@Gajotres：是否以某种方式记录了有关点击绑定的问题？我对 HTML5/phonegap 应用程序有类似的问题。 click() 不起作用，而 on("click", function()) 起作用...在此先感谢。

【解决方案2】：

试试下面的代码：

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

【讨论】：