Fatal编程技术网
  • javascript/
  • Javascript Jquery mobile-在按钮单击事件后返回索引

Javascript Jquery mobile-在按钮单击事件后返回索引

javascript function jquery-mobile button redirect

Javascript Jquery mobile-在按钮单击事件后返回索引,javascript,function,jquery-mobile,button,redirect,Javascript,Function,Jquery Mobile,Button,Redirect,我是Jquery移动技术的新手，我必须承认在这个框架的行为中有一些我还不了解的小东西。我正在使用Cordova 2.9.1和JQuery Mobile 1.2.0（我的常规JQuery版本是1.8.2）开发一个平板电脑应用程序 基本上，我有一个多页的html文件（2页）。对于其中两个，我使用一个哑表单和一个哑按钮来验证输入 HTML代码-index.HTML <head> <meta charset="utf-8"> <meta name="

我是Jquery移动技术的新手，我必须承认在这个框架的行为中有一些我还不了解的小东西。我正在使用Cordova 2.9.1和JQuery Mobile 1.2.0（我的常规JQuery版本是1.8.2）开发一个平板电脑应用程序

基本上，我有一个多页的html文件（2页）。对于其中两个，我使用一个哑表单和一个哑按钮来验证输入

HTML代码-
index.HTML

<head>
    <meta charset="utf-8">
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, target-densitydpi=device-dpi" />
        <title>MyApp</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>               
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <script type="text/javascript" src="js/index.js"></script>
</head>

<body>
    <div data-role="page" data-theme="c" id="index">
        <div data-role="content">
            <form name="login_form">
                <div align="center">
                    <input type="text" name="username" id="username"/>
                    <input type="password" name="password" id="password"/>
                    <br/>
                    <button data-role="button" data-inline="true" data-theme="c" class="connection_button">Se connecter</button>
                    <br/><br/>
                    <a class="force-reload" href="#mdp_oublie" data-role="button" data-inline="true" data-theme="c" data-transition="slide">Mot de passe oublié</a>
                </div>
            </form>
        </div>
    </div>

    <div data-role="page" data-theme="c" id="mdp_oublie">
        <div data-role="content">
            <form name="email_form">
                <div align="center">
                    <input type="email" name="email" id="email"/>
                    <button data-role="button" data-inline="true" data-theme="c" class="email_button" onclick="email_recovering(this)">Valider</button>
                </div>
            </form>
        </div>
    </div>
</body>

$('[data-role="page"]').live('pageshow', function ()
{
    $(document).on('click', '.connection_button', function (e)
    {
        if(e.handled !== true)
        {
            var username = $('#username').val();
            var password = $('#password').val();

            if(username == "a" && password == "b")
                alert("OK");
            else
                alert("KO");

            e.handled = true;
        }
    });
});
问题是，当单击“Se Connecter”按钮时，函数按其应该的方式执行，但JQuery随后将我重定向到索引页面（第一个）。我不明白为什么

我的两个问题是：

  • 我称我的连接按钮功能好吗？我尝试了几次$（document.ready（）{}）；方法，它对我不起作用。有更好的吗

  • 当函数被调用时，您是否知道重定向到索引页

    • 我希望我已经尽可能清楚了。
    谢谢。

    对于按钮（至少对于jQuery Mobile 1.2.0），正确的做法是使用
    链接：

    <a href="#" data-role="button" data-inline="true" data-theme="c" id="connection_button">Se connecter</a>
    您应该使用id而不是类来标识此按钮，除非您计划有许多。。。如果我是你，我会在js代码中使用并且只有你的函数。您不需要更多的信息来处理单击。感谢您的解释。我应用了它们，问题也是一样的。经过一些研究，我终于找到了解决方案：似乎PhoneGap从2.7.0版本开始在iOS上崩溃，返回错误CDVWebViewDelegate:Navigation started when state=1，当您尝试导航到同一页面上的锚时。这里有更多信息：您在JSFIDLE中上传的代码是可以运行的，但是当我在我的项目中尝试它时，我遇到了这个PhoneGap错误。不管怎样，谢谢你，你的建议很好。 
    $(document).on("pageshow", "[data-role=page]", function(event, ui)
{
    $(document).on("click", "#connection_button", function(event)
    {
        var username = $('#username').val();
        var password = $('#password').val();

        if(username == "a" && password == "b")
            alert("OK");
        else
            alert("KO");
    });

    $(document).on("click", "#email_button", function(event)
    { 
        email_recovering(this);
    });
});