How Can I Debug With Jquery. Why This Code Does Not Work?

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

Solution 1:

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.

Solution 2:

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

Solution 3:

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

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

Solution 4:

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 + bordervar 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();
            });
            returnfalse;
            });
        returnfalse;
    });

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

});

Solution 5:

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.