Assign click event after an element was created dynamically
<p>So, instead of having a form in the HTML, I decided to create the form on fly and append it to another element (in my case a <code>&lt;section&gt;</code>, but that will be an option in the near future).</p>

<p>I'm using this method:</p>

<pre><code>var formWrapper = ['&lt;div class="content-login"&gt;','&lt;/div&gt;'];

var form = [
    '&lt;form name="login-form" class="login-form" method="post" action="#"&gt;',
        '&lt;fieldset class="login-fields"&gt;',
            '&lt;fieldset class="username-wrapper"&gt;',
                '&lt;label for="username" class="user-img"&gt;&lt;img src="assets/gfx/user.png" alt="Username" /&gt;&lt;/label&gt;',
                '&lt;input type="text" name="username" class="username" placeholder="Username" value="" autocomplete="off" /&gt;',
            '&lt;/fieldset&gt;',
            '&lt;fieldset class="password-wrapper"&gt;',
                '&lt;label for="password" class="pass-img"&gt;&lt;img src="assets/gfx/password.png" alt="Password" /&gt;&lt;/label&gt;',
                '&lt;input type="password" name="password" class="password" placeholder="Password" value="" autocomplete="off" /&gt;',
            '&lt;/fieldset&gt;',
            '&lt;fieldset class="login-wrapper"&gt;',
                '&lt;button type="submit" name="login" class="login"&gt;Login&lt;/button&gt;',
            '&lt;/fieldset&gt;',
        '&lt;/fieldset&gt;',
    '&lt;/form&gt;'       
];

setTimeout(function () {
    $(formWrapper.join('')).appendTo('section').hide();
    $(form.join('')).appendTo('.content-login');
    $('.content-login').fadeIn('slow');
}, 1500);
</code></pre>

<p>This way I have a nice fade in effect and it will give me the opportunity to change whatever I want after I fully develop it.</p>

<p>But my question is in fact the following: I have a form, so of course I will use Ajax to submit it, and I already have the script for that. The thing is now, when I click on the button, the .click event does not occur, it only takes me to the default action of the form which is "#" in my case. Why is that ?</p>

<p>Here is the other part of the script, for a better understanding :</p>

<pre><code>$('.login-form .login').click(function(){
    if($('input.username').val() == "" || $('input.password').val() == "")
    {
        console.log('Please enter Username &amp; Password');
        $('.login-form').effect("shake", { distance: 40, times: 2 }, 100);
        return false;
    }
    else {  

        $('.login-fields').fadeOut();
        $('.login-form').spin("login", "#ffffff");      
        $.ajax
        ({
            type: 'POST',
            url: 'assets/class/login/process.php',
            dataType: 'json',
            data:
            {
                username: $('input.username').val(),
                password: $('input.password').val()
            },
            success:function(data)
            {
                if(!(data.lockdown == true)) {
                    if(data.error === true) {   
                        console.log(data.message);
                        $('.login-form').spin(false);
                        $('.login-fields').fadeIn();
                        $('.login-form').effect("shake", { distance: 40, times: 2 }, 100);
                    }
                        else {
                            console.log(data.message);
                            $('.login-form').spin(false);
                            $('.login-fields').fadeIn();
                            $('.content-login').fadeOut();

                            var structure = [
                                '&lt;div class="after-login"&gt;',
                                    '&lt;div class="inside"&gt;',
                                        '&lt;div class="row-one"&gt;',
                                            '&lt;h1&gt;',data.message,'&lt;/h1&gt;',
                                        '&lt;/div&gt;',
                                        '&lt;div class="row-two"&gt;',
                                            '&lt;a class="cancel" href="',links.cancel,'?logout"&gt;Cancel&lt;/a&gt;',
                                            '&lt;a class="continue" href="',links.proceed,'"&gt;Continue&lt;/a&gt;',
                                        '&lt;/div&gt;',
                                    '&lt;/div&gt;',
                                '&lt;/div&gt;'
                            ];

                            setTimeout(function () {
                                $(structure.join('')).appendTo('section').fadeIn('slow');
                            }, 1500);

                        }
                }
                    else {
                        console.log(data.message);
                        $('.login-form').spin(false);
                        $('.content-login').fadeOut();

                        var structure = [
                            '&lt;div class="system-lockdown"&gt;',
                                '&lt;div class="inside"&gt;',
                                    '&lt;div class="row-one"&gt;',
                                        '&lt;h1&gt;',data.message,'&lt;/h1&gt;',
                                    '&lt;/div&gt;',
                                    '&lt;div class="row-two"&gt;',
                                        '&lt;a class="back" href="',links.goback,'"&gt;Back&lt;/a&gt;',
                                    '&lt;/div&gt;',
                                '&lt;/div&gt;',
                            '&lt;/div&gt;'
                        ];

                        setTimeout(function () {
                            $(structure.join('')).appendTo('section').fadeIn('slow');
                        }, 1500);
                    }
            },
            error:function(XMLHttpRequest,textStatus,errorThrown)
            {
                console.log('A PHP error triggered this, check your PHP log file for more information');
            }
        });
        return false;
    }
});
</code></pre>
