Fancybox doesn't work on second click

Question

I'm working on a register/login system. The register form works with fancybox. Once I click on the 'Register' link I get to see the registration form in a fancybox window. Once the form is submitted it will run register.php trough ajax that will check if the username already exists. If the username already exists there have to show up a message. This works, but if I want to submit the form again the form closes and nothing else happens. The javascript function doesn't run for some reason. Anyone have an idea what I'm doing wrong and can help me?

Javascript:

$(function() {
    $('#register-form').bind('submit', function () {
        $.ajax({
            type: 'POST',
            cache: false,
            url: '/register.php',
            data: $(this).serializeArray(), 
            success: function (data) {
                alert('test');
                $('#register').html(data);

            }
        });
        return false;
    });
});

// Code in the footer of every page what opens in the fancybox when you click the 'Register' link

<div id="fbRegisterCntr" style="display: none;">
    <div class="popup">
        <div class="inner" id="register">
            <h3>Register</h3>
            <form method="post" action="" id="register-form">
                <fieldset>
                    <input type="text" name="username" class="field">
                    <input type="password" name="password" class="field">
                    <input type="text" name="email" class="field">
                    <input type="submit" class="button" value="Register">
                </fieldset>
            </form>
        </div>
    </div>
</div>

Register.php

echo ' 
    <h3>Register</h3>
    <p>Username already exists</p>
    <form method="post" action="" id="register-form"> 
        <fieldset> 
            <input type="text" name="username" class="field" placeholder="Vul hier je gebruikersnaam in..." value="' . $username . '"> 
            <input type="password" name="password" class="field" placeholder="Vul hier je wachtwoord in..." value="' . $password . '"> 
            <input type="text" name="email" class="field" placeholder="Vul hier je e-mailadres in..." value="' . $email . '"> 
            <input type="submit" class="button" value="Registreren"> 
        </fieldset> 
    </form>'; 

Answer 1

You should delegate event to container level:

$('#register').on('submit', '#register-form', function () {...});