动态创建元素后分配点击事件

Question

因此，我决定不使用HTML中的表单，而是决定动态创建表单并将其附加到另一个元素（在我的情况下为<section> ，但这将是不久的将来的一种选择）。

我正在使用这种方法：

var formWrapper = ['<div class="content-login">','</div>'];

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

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

这样，我的效果会很好，并且在我完全开发它之后，将有机会改变我想要的任何东西。

但是实际上我的问题是：我有一个表单，所以我当然会使用Ajax提交它，并且我已经有了该脚本。 现在的事情是，当我单击按钮时，不会发生.click事件，它只会带我进入表单的默认操作，本例中为“＃”。 这是为什么 ？

这是脚本的另一部分，可以使您更好地理解：

$('.login-form .login').click(function(){
    if($('input.username').val() == "" || $('input.password').val() == "")
    {
        console.log('Please enter Username & 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 = [
                                '<div class="after-login">',
                                    '<div class="inside">',
                                        '<div class="row-one">',
                                            '<h1>',data.message,'</h1>',
                                        '</div>',
                                        '<div class="row-two">',
                                            '<a class="cancel" href="',links.cancel,'?logout">Cancel</a>',
                                            '<a class="continue" href="',links.proceed,'">Continue</a>',
                                        '</div>',
                                    '</div>',
                                '</div>'
                            ];

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

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

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

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

Answer 1

$.click()仅适用于在创建处理程序之前创建的元素。

而是使用$.live()代替：

$('.login-form .login').live('click', function() {
    // Your code
});

如果您使用的是jQuery 1.7或更高版本，则还可以通过类似的方式使用$.on() ：

$('.login-form .login').on('click', function() {
    // Your code
});

Answer 2

处理带有动态添加内容的事件的首选方法是on()或delegate ，因为您使用的是jQuery 1.6

$(document).delegate('.login-form .login', 'click', function(){
});

请注意，这将监听文档中任何位置的每次单击。 理想情况下，您想确定一个更狭窄的容器， 所有点击都将来自该容器，然后听一下 。 因此，如果所有这些点击都来自您的板块，则可以这样做

$("section").delegate('.login-form .login', 'click', function(){
});