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

我是Jquery Mobile技术的新手，我必须承认在这个框架的行为中还存在一些我不明白的东西。我正在开发使用Cordova 2.9.1和JQuery Mobile 1.2.0的平板电脑应用程序（我的常规JQuery版本是1.8.2）。Jquery mobile - 按钮单击事件后返回索引

基本上，我有一个多页的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>

我遇到了一些问题，触发按钮单击事件。经过一些研究，我已经在我的index.js文件中使用了这种方法。

Javascript代码 - index.js

$('[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; 
     } 
    }); 
});

的问题是，当点击“硒连接器”按钮时，该功能被执行的方式应该，但JQuery的然后重定向我的索引页（第一个）。我不明白为什么...

我的两个问题是：

是我打电话给我的connection_button功能一个很好的方式？我尝试了几次$（document）.ready（）{}）;方法，它不适合我。你有更好的吗？
当函数被调用时，您是否有任何关于重定向到索引页的想法？

我希望我尽可能的清楚。谢谢。

来源

2014-07-04 Biloutage

您应该使用ID而不是类，以确定该按钮，除非你打算有很多......我会用<按钮的onclick = your_function （）>，如果我是你，只有js代码中有your_function。你不需要比这更多的处理点击。 – IazertyuiopI

正确思考按钮做（至少在jQuery Mobile的1.2.0）是使用<a href="#">链接：

<a href="#" data-role="button" data-inline="true" data-theme="c" id="connection_button">Se connecter</a>

这样

没有重定向到其他页面。我有固定的JavaScript和与您的代码创建一个JSFiddle：

$(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); 
    }); 
});

来源

2014-07-04 11:38:07 Sga

谢谢你的解释。我应用了它们，问题是一样的。经过一番研究，我终于找到了什么应该是解决方案：看来PhoneGap自2.7.0版本以来崩溃在iOS上，返回错误** CDVWebViewDelegate：导航在state = 1时启动**当您尝试导航到同一页面上的一个锚点。更多的信息在这里：https：//issues.apache.org/jira/browse/CB-3530 你在JSFiddle上传的代码是好的，运行良好，但是当我在我的项目中尝试它时，我有这个PhoneGap错误。无论如何，谢谢你，你的建议是伟大的。 – Biloutage

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

回答

相关问题