如何使用jQuery进行调试.为什么此代码不起作用? [英] How can I debug with jQuery. Why this code does not work?

问题描述

我正在使用CSS和jQuery制作弹出式登录表单.

I'm doing a popup login form with css and jQuery.

登录弹出窗口是正确的，但是我的问题是...关闭弹出窗口的唯一方法是按下提交"按钮.为什么当用户单击然后遮罩或在关闭的图像中它不关闭.

The login popup's right, but my problem is... the only way of close the popup is pressing the submit button. Why it does not close when user clicks then mask or in the close image.

我为此而发疯...

请帮助我！

代码: 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:

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

推荐答案

更改

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

到

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

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

Use event bubbling so you can catch the click on the dynamically created element.

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

Other option is to add the click event after you create the element.

这篇关于如何使用jQuery进行调试.为什么此代码不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！