javascript - 如何使用 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 () {

使用事件冒泡，这样您就可以捕获对动态创建的元素的点击。

其他选项是在创建元素后添加点击事件。