HTML id is not recognizing in JQuery for multiple onsen-page

Question

I am trying an App in monaca using onsen UI. I have multiple pages and using Onsen Navigator for navigating in my pages.

1st Page has Login Button and Register button which open (push) Register page with Userid and email information.

I am trying to sense the button clicking using jQuery in ons.ready(function(). When I am clicking the Login button on first page (Login) jQuery fires the required function but when I am trying to click on Register Button (in Register page) it is not firing the function.

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

Then I defined two functions as well. I am using two different html (login.html and register.html) and pushing pages.

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>

you'll likely need to add the markup and function declarations for anyone to be able to help — aw04, Jan 15 '16 at 19:41
Creating https://plnkr.co to play with helps!! It increases chances of getting your answer accurate and fast. — vinesh, Jan 16 '16 at 20:08

score 0 · Answer 1 · answered Jan 18 '16 at 02:40

0

I think in your code, when you bind the functions to the buttons only #LoginBtn id exists. #RegisterBtn has not been pushed yet so probably $('#RegisterBtn') returns null. The easiest way to do it is as follows: <ons-button id="RegisterBtn" onclick="onRegisterBtn" ... >.

You can probably do it in the pushPage callback as well: myNavigator.pushPage('register.html', onTransitionEnd: function() { $("#RegisterBtn").click(onRegisterBtn); });

Hope it helps!

answered Jan 18 '16 at 02:40

Fran Dios

3,482
2
15
26

Thank you for your comments , I didn't tried it but I think it will work. I moved my application to angular completely and achieved the functionality. – Anand P Feb 10 '16 at 10:25

HTML id is not recognizing in JQuery for multiple onsen-page

1 Answers1