Question

I have a link on my site which opens a modal dialog with the login form. I use AJAX to send the login data to the server and but somehow, the .click() event doesn’t work. I guess its because I load the html with .html().

Here’s the code:

$('#loginLink').click(function(e) {
            e.preventDefault();
            $('<div id="loginContainer" title="Login"></div>')
            .html('<?php echo str_replace(array("\r\n", "\r", "\n"), "", $this->element("ajax/login")); ?>')
            .dialog({
                modal: true,
                resizable: false,
                position: 'top'
            });
        });
        $('#UserLoginForm input[type=submit]').click(function() {
            e.preventDefault();

            var form = $('#UserLoginForm').serialize();

            $.ajax({
                type: 'POST',
                url: '/login',
                dataType: 'json',
                data: form,
                beforeSend: function(XMLHttpRequest) {
                    $("#loginContainer .ajaxloader").show();
                },
                success: function(data) {
                    var message = $("#loginContainer > .flashMessage");

                    if(data.status == 'success') {
                        location.href = '/account';
                    } else {
                        message.text(data.msg);
                        message.show();
                    }
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    $('#loginContainer .ajaxloader').hide();
                    $('#loginContainer > .flashMessage').text('There was an error.').show();
                },
                complete: function(XMLHttpRequest) {
                    $("#loginContainer .ajaxloader").hide();
                }
            });
            return false;
        });

This part loads the content from a file:

<?php echo str_replace(array("\r\n", "\r", "\n"), "", $this->element("ajax/login")); ?>

And outputs:

<div class="flashMessage fail"></div><form action="/login" controller="users" id="UserLoginForm" method="post" accept-charset="utf-8"><div style="display:none;"><input type="hidden" name="_method" value="POST"/></div><div class="input text required"><label for="UserEmail">E-Mail</label><input name="data[User][email]" style="width: 267px;" maxlength="64" type="text" id="UserEmail"/></div><div class="input password required"><label for="UserPassword">Password</label><input name="data[User][password]" style="width: 267px;" type="password" id="UserPassword"/></div><div class="submit"><input type="submit" value="Login"/></div></form><div class="ajaxloader"><img src="/img/icons/ajax-loader.gif" alt="" /></div><div class="clear" style="line-height: 8px;">&nbsp;</div>

Everything works fine except the .click() part to send the AJAX request :/ Im not that good in Javascript, so I don’t know what exactly the error is.

Answer 1

1. Any dynamic contents inserted into dom should use .on ( jQuery v1.7) or .live/.delegate ( before jQuery 1.7).
2. You are missing quotes inside the attribute selector..
3. As in other post, you missed to pass ‘e’ (event) argument.

Using .on or .delegate is recommended over .live.

Using .on [recommended]

      $('#loginContainer').on('click',  '#UserLoginForm input[type="submit"]', function (e) {

Using .live,

      $('#UserLoginForm input[type="submit"]').live('click', function(e) {

Using .delegate [recommended]

      $('#loginContainer').delegate('#UserLoginForm input[type="submit"]', 'click', function (e) {