1

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

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

4

2 回答 2

4

这应该有效：

  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>

  2. 还要更改您的点击处理，以便您的最终代码如下所示：

    <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 将丢弃其他所有内容。在此处阅读更多相关信息。

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

于 2013-05-27T08:45:52.390 回答
0

试试下面的代码：

$(document).ready(function(){
    $('#register_button').on.('click',function(){
            $('#error_message_label').text('E-mail not set.');
            $('#error_message').show();
    });
}
于 2013-05-27T08:51:18.793 回答