How can I debug with jQuery. Why this code does not work?

Question

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.

I'm getting crazy with this...

Please help me!!

The code: 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;
});
});

possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Barmar, Mar 10 '14 at 16:39

score 5 · Accepted Answer · answered Mar 10 '14 at 16:28

Change

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

to

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

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

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

score 0 · Answer 2 · answered Mar 10 '14 at 16:25

0

The class you need to bind to is .btn_close

http://jsfiddle.net/XZAmn/2/

   $('a.btn_close, #mask').click(function () {
        $('#mask, .login-popup').fadeOut(300, function () {
            $('#mask').remove();
        });
        return false;
    });

answered Mar 10 '14 at 16:25

reach4thelasers

26,181
22
92
123

2

`#mask` won't work either, as it doesn't exist at the time of binding the event handler. – Reinstate Monica Cellio Mar 10 '14 at 16:26
the btn_close now works as expected, but as Archer said, the #mask does't... How can I fix that? – alijunior Mar 10 '14 at 16:28
@alijunior use delegation as in epascarello's answer – A. Wolff Mar 10 '14 at 16:30

score 0 · Answer 3 · answered Mar 10 '14 at 16:26

0

$('a.btn_close, #mask').click(function () {
    $('#mask, .login-popup').fadeOut(300, function () {
        $('#mask').remove();
    });
    return false;
});

use class btn_close instead of close in your js fixes at least the button ;-)

answered Mar 10 '14 at 16:26

mrcrgl

640
4
11

2

`#mask` won't work either, as it doesn't exist at the time of binding the event handler. – Reinstate Monica Cellio Mar 10 '14 at 16:27

Petar Vasilev · Answer 4 · 2014-03-10T16:33:06.067

0

I've updated your fiddle with the correct change: http://jsfiddle.net/XZAmn/11/ and it works fine now

Basically you need to change:

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

to:

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

You've got the wrong class at first '.close' and then you are binding event to '#mask' which doesn't exist yet which is why you need to bind to the document and then filter the elements using jQuery's 'on' method.

edited Mar 10 '14 at 16:33

answered Mar 10 '14 at 16:27

Petar Vasilev

4,281
5
40
74

2

`#mask` won't work either, as it doesn't exist at the time of binding the event handler. – Reinstate Monica Cellio Mar 10 '14 at 16:27
The same answer of epascarello... both works fine. Thank you so much!! – alijunior Mar 10 '14 at 16:42

score 0 · Answer 5 · answered Mar 10 '14 at 16:30

You try to bind the close function to the mask at a moment when the mask doesn't even exist. You should bind the close function after you create the mask itself, i altered your JSFiddle, you can find it here: http://jsfiddle.net/XZAmn/9/

Also, you didn't use the right class to bind the close function to the close button.

$(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);
            $('a.btn_close, #mask').click(function () {
            $('#mask, .login-popup').fadeOut(300, function () {
                $('#mask').remove();
            });
            return false;
            });
        return false;
    });

    // When clicking on the button close or the mask layer the popup closed

});

score 0 · Answer 6 · answered Mar 10 '14 at 16:48

0

$('body').on('click','#mask, .btn_close',function (e) {
    e.preventDefault();
    $('#mask, .login-popup').fadeOut(300, function () {
        $('#mask').remove();
    });
    return false;
});

answered Mar 10 '14 at 16:48

Karthik Naidu

141
3

How can I debug with jQuery. Why this code does not work?

6 Answers6

Linked