JQM pagecontainer change redirects back to home page automatically - jquery-mobile

Question

I am working with a single page model
JQM version 1.4.5
platform XDK
I want to navigate from SignInPage to SignUpPage on Click as follows;
<!-- pageOne -- Sign In -->
<div data-role="page" id="signInPage" class="blue">
<div data-role="content" class="ui-content formContents" style="padding: 15px;">
<img border="0" src="images/login_icon.png" class="centerimg" >
<form id="loginform">
<input type="text" placeholder="User Name" id="loginusername">
<input type="password" placeholder="Password" id="loginpassword">
<input type="submit" value="login" data-theme="a" id="loginBtn">
</form>
</div>
</div>
<!-- pageTwo -- Sign Up -->
<div data-role="page" id="signUpPage" class="blue">
<div data-role="content" style="padding: 15px" class="formContents">
<img border="0" src="images/login_icon.png" class="centerimg">
</div>
</div>
and the corresponding JS code
$(document).on('pageinit','#signInPage', function(){
$('#loginBtn').on('click',function() {
$.mobile.changePage( "#signUpPage", { transition: "slideup"} );
// redirectRegister();
});
});
function redirectRegister(){
$.mobile.pageContainer.pagecontainer('change', '#signUpPage', {
"transition" : "slide"
});
return false;
}
As you can notice i tried both pageContainer and changePage methods and both gives me the same behaviour, goes to next page then redirect automatically to home again
I checked these solutions and non of them worked for me;
pagecontainer solution
change page solution
Does anyone have an idea about what is going on exactly or how to trace what's going on while trying to change page and he auto redirection to home