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 - 按鈕單擊事件後返回索引

回答

相關問題