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

在动态创建元素后分配click事件

2 个答案: