Question

我正在使用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）并推送页面。

index.html：

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

login.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>

register.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>

Answer 1

我认为在您的代码中，当您将函数绑定到按钮时，只存在#LoginBtn id。 #RegisterBtn尚未被推送，因此$('#RegisterBtn')可能会返回null。最简单的方法如下：<ons-button id="RegisterBtn" onclick="onRegisterBtn" ... >。

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

希望它有所帮助！

HTML ID无法在JQuery中识别多个onsen-page

1 个答案: