Fancybox在第二次点击时不起作用

时间:2014-05-13 10:56:56

标签: jquery fancybox

我正在研究注册/登录系统。注册表与fancybox一起使用。一旦我点击“注册”链接,我就可以在fancybox窗口中看到注册表单。提交表单后,它将通过ajax运行register.php,检查用户名是否已存在。如果用户名已经存在,则必须显示一条消息。这有效,但如果我想再次提交表单,表单将关闭,不会发生任何其他情况。 javascript函数由于某种原因不运行。任何人都知道我做错了什么并且可以帮助我?

使用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;
    });
});

//每个页面的页脚中的代码当您单击“注册”链接时,在fancybox中打开的代码

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

1 个答案:

答案 0 :(得分:0)

您应该将事件委托给容器级别:

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