我如何使用jQuery进行调试.为什么这段代码不起作用？

Question

我正在使用css和jQuery进行弹出式登录表单.

登录弹出窗口是正确的,但我的问题是...关闭弹出窗口的唯一方法是按下提交按钮.当用户点击然后屏蔽或关闭图像时,为什么它不会关闭.

我对此感到疯狂......

请帮我!!

代码:http://jsfiddle.net/XZAmn/

HTML:

<br />
<a class="btn-sign" href="#login-box">login</a>

<div id="login-box" class="login-popup"> <a href="#" class="btn_close">
        <img src="http://www.alisol.com.br/crm/imagens/close_pop_blue.png?v=4" class="btn_close" title="Fechar" alt="Fechar" /></a>

<form method="post" class="signin" action="#">
    <fieldset class="textbox">
         <h3>LOGIN</h3>

        <label class="username">
            <input id="username" name="username" value="" type="text" autocomplete="on" placeholder="usuário">
        </label>
        <label class="password">
            <input id="password" name="password" value="" type="password" placeholder="senha">
        </label>
        <input id="enter" type="submit" value="Entrar" />
    </fieldset>
</form>

JavaScript的:

$(document).ready(function() {

$('a.btn-sign').click(function() {

    // Getting the variable's value from a link 
    var loginBox = $(this).attr('href');

    //Fade in the Popup and add close button
    $(loginBox).fadeIn(300);

    //Set the center alignment padding + border
    var popMargTop = ($(loginBox).height() + 24) / 2; 
    var popMargLeft = ($(loginBox).width() + 24) / 2; 

    $(loginBox).css({ 
        'margin-top' : -popMargTop,
        'margin-left' : -popMargLeft
    });

    // Add the mask to body
    $('body').append('<div id="mask"></div>');
    $('#mask').fadeIn(300);

    return false;
});

// When clicking on the button close or the mask layer the popup closed
$('a.close, #mask').click( function() { 
  $('#mask, .login-popup').fadeOut(300 , function() {
    $('#mask').remove();  
}); 
return false;
});
});

Answer 1

更改

$('a.close, #mask').click( function() { 

至

$(document).on("click", 'a.btn_close, #mask', function () {

使用事件冒泡,以便您可以捕获动态创建的元素上的单击.

其他选项是在创建元素后添加click事件.