3

我正在使用 onsen UI 在 monaca 尝试应用程序。我有多个页面并使用 Onsen Navigator 在我的页面中导航。

第一页有登录按钮和注册按钮，可打开（推送）带有用户 ID 和电子邮件信息的注册页面。

我试图在 ons.ready(function() 中使用 jQuery 来感知按钮单击。当我单击第一页（登录）上的登录按钮时，jQuery 会触发所需的功能，但是当我尝试单击注册按钮时（在注册中页）它没有触发该功能。

   <script>
     ons.bootstrap();
     ons.ready(function() {
       // Add another Onsen UI element
       console.log('I am here');
       $(function() {
         $("#LoginBtn").click(onLoginBtn);
         $("#RegisterBtn").click(onRegisterBtn);
       });
     });
     function onRegisterBtn()
     {
     console.log('Register Button in register page');
     };
     function onLoginBtn()
     {
     console.log('Login Button in Login page');
     };
   </script>

然后我也定义了两个函数。我正在使用两个不同的 html（login.html 和 register.html）并推送页面。

索引.html：

<body>
    <ons-navigator var="QubecNavigator" page="login.html">
    </ons-navigator> 
</body>

登录.html：

<ons-page id="loginPage">
  <div class="login-form">
    <input id="login_phone" type="tel" placeholder="Mobile" class="text-input--underbar" value="">
    <input id="login_password" type="password" placeholder="Password" class="text-input--underbar"  value="">
    <br><br>
    <ons-button id="LoginBtn" modifier="large--cta" class="login-button">Log In</ons-button>
    <br><br>
    <ons-button modifier="quiet" class="Register-button" onclick="QubecNavigator.pushPage('register.html')" >Register</ons-button>
  </div>
</ons-page>

注册.html：

<ons-page id="registerpage">
  <ons-toolbar>
    <div class="center">Log In</div>
    <div class="left">
      <ons-back-button>Back</ons-back-button>      
    </div>
  </ons-toolbar>
  <div class="register-form">
    <input id="reg_phone"  type="tel" class="text-input--underbar" placeholder="Mobile Number" value="">
    <input id="reg_email" type="email" class="text-input--underbar" placeholder="Email" value="">
    <input id="reg_password" type="password" class="text-input--underbar" placeholder="Password" value="">
    <br><br>
    <ons-button id="RegisterBtn" modifier="large--cta" class="register-button">Register</ons-button>
    <br><br>
  </div>
</ons-page>
4

1 回答 1

0

我认为在您的代码中，当您将功能绑定到按钮时，只有#LoginBtnid 存在。#RegisterBtn还没有被推送，所以可能会$('#RegisterBtn')返回null。最简单的方法如下<ons-button id="RegisterBtn" onclick="onRegisterBtn" ... >：

您也可以在pushPage回调中执行此操作：myNavigator.pushPage('register.html', onTransitionEnd: function() { $("#RegisterBtn").click(onRegisterBtn); });

希望能帮助到你！

于 2016-01-18T02:40:45.103 回答