HTML ID在JQuery中無法識別多個onsen頁面

我正在嘗試使用onsen UI的monaca中的應用程序。我有多個頁面，並使用Onsen Navigator在我的頁面中導航。HTML ID在JQuery中無法識別多個onsen頁面

第一頁有登錄按鈕和註冊按鈕，它們打開（推送）使用Userid和電子郵件信息註冊頁面。我試圖在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>

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

來源

2016-01-15 Anand P

您可能需要添加標記和函數聲明，以便任何人都能夠提供幫助 – aw04

修改了代碼片段的問題 –

創建https://plnkr.co以幫助玩！它增加了讓你的答案准確和快速的機會。 – vinesh

我想在你的代碼，當你綁定的功能只#LoginBtn ID存在的按鈕。 #RegisterBtn尚未推送，因此可能$('#RegisterBtn')返回null。最簡單的方法如下：<ons-button id="RegisterBtn" onclick="onRegisterBtn" ... >。

你或許可以做它在pushPage回調以及：myNavigator.pushPage('register.html', onTransitionEnd: function() { $("#RegisterBtn").click(onRegisterBtn); });

希望它能幫助！

來源

2016-01-18 02:40:45

謝謝您的意見，我沒有嘗試過，但我認爲它會起作用。我將應用程序完全移動到角度並實現了功能。 –

HTML ID在JQuery中無法識別多個onsen頁面

回答

相關問題