Question

在我网站的登录页面上，我有两个相同的登录表单。一个在页面的主体中，第二个被加载到标题中的Login链接的jquery对话框中。我已经删除了所有相同的ID并使用了类。

我要做的是：在用户点击对话框中的提交后，我试图将错误消息放入正确的DIV中，但是在jquery $(this)之后我post()未定义或ajax电话。

$('.login-submit').live('click', function(){
alert($(this).attr('class')); // THIS WORKS
    var form = $(this).parent('form').get(0);   
    var values = $(this).parent('form').serialize();
    $.post('/users/login',values,function(data){
        if(!data['success']) {
            alert($(this).attr('class')); // THIS SAYS UNDEFINED
            // TRYING TO DO THIS
            $(this).siblings('.form-error').html(data['error']); 
        } 
    },'json');
});

以下是HTML：

<form class="form-login" method="post" action="/users/login">
<input type="hidden" name="_method" value="POST">
<div class="form-error"></div>
<input name="data[User][username]" type="text" maxlength="20" id="UserUsername">
<input type="button" class="login-submit" value="Sign In">
</form>

Answer 1

post回调在不同的上下文中执行。

您需要将外部this保存在变量中，以便在内部函数中使用它。

Answer 2

在您的示例中，这是指匿名函数。试试这个：

$('.login-submit').live('click', function(){
var that = this;
alert($(this).attr('class')); // THIS WORKS
    var form = $(this).parent('form').get(0);   
    var values = $(this).parent('form').serialize();
    $.post('/users/login',values,function(data){
        if(!data['success']) {
alert($(that).attr('class')); // THIS SAYS UNDEFINED
            // TRYING TO DO THIS
            $(that).siblings('.form-error').html(data['error']); 
        } 
    },'json');
});

您的函数将在其执行范围内具有此功能，但它将存储在该变量中。

Answer 3

这是因为Javascript闭包 - 在每个新函数的范围内重新定义了“this”。

$('.login-submit').live('click', function(){
    alert($(this).attr('class')); // THIS WORKS
    var form = $(this).parent('form').get(0);   
    var values = $(this).parent('form').serialize();
    var me = $(this);
    $.post('/users/login',values,function(data){
        if(!data['success']) {
            me.siblings('.form-error').html(data['error']); 
        } 
        },
    'json');
});

$（this）对象在jquery post（）后变为undefined

3 个答案: