After pressing the button will display the confirm page again and again,how to fix it?

After pressing the button will display the confirm page again and again,how to fix it?

<!DOCTYPE html>
<html>
<head>
    <title>jQM</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script>
$(document).on('pagecontainershow', function (e, ui) {
var activePage = $(':mobile-pagecontainer').pagecontainer('getActivePage');
if(activePage.attr('id') === 'login') {
        $(document).on('click', '#submit', function() {
            if($('#username').val().length > 0 && $('#password').val().length > 0){   
            } else {
$.mobile.changePage( "#errtip", { role: "dialog" } );
            }          
            return false;
        });  
    }
});
 </script>
</head>
<body>
    <div data-role="page" id="login" data-theme="b">
        <div data-role="header" data-theme="a">       
            <h3>login</h3>
        </div>
        <div data-role="content">
            <form id="check-user" class="ui-body ui-body-a ui-corner-all" data-ajax="false">
                <fieldset>
                    <div data-role="fieldcontain">
                        <label for="username">Enter your username:</label>
                        <input type="text" value="" name="username" id="username"/>
                    </div>                                 
                    <div data-role="fieldcontain">                                     
                        <label for="password">Enter your password:</label>
                        <input type="password" value="" name="password" id="password"/>
                    </div>
                    <input type="button" data-theme="b" name="submit" id="submit" value="Submit">
                </fieldset>
            </form>                             
        </div>
        <div data-theme="a" data-role="footer" data-position="fixed">
        </div>
    </div>
    <div data-role="page" id="second">
        <div data-theme="a" data-role="header">
            <a href="#login" class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-delete" id="back-btn">返迴</a>      
            <h3>welcome</h3>
        </div>
        <div data-role="content"> 
        </div>
        <div data-theme="a" data-role="footer" data-position="fixed">
            <h3>footer</h3>
        </div>
    </div>
<div data-role="page" id="errtip">
        <div data-theme="a" data-role="header">
            <a href="#" onclick="$('.ui-dialog').dialog('close')" data-role="button" data-theme="c">close</a>      
            <h3>welcome</h3>
        </div>
        <div data-role="content"> 
        </div>
        <div data-theme="a" data-role="footer" data-position="fixed">
            <h3>footer</h3>
        </div>
    </div>
</body>
</html>