Question

我正在使用ajaxform来处理表单提交，并遇到了选项变量的问题。我试图让成功回调将一些HTML附加到相关元素，因此我正在使用$(this)方法，正如我通常所做的那样。我不能让它工作，我在这里错过了一些简单的东西吗？有$(this)无效的原因吗？插件网址为http://malsup.com/jquery/form/

提前致谢

A

选择器引用元素，以便提交ajaxform插件。它如下$('#formSEIncome').ajaxForm(options)

jQuery选项如下：

var options = {             
       success: function() { 
       $(this).parents('.trm_expense_cats').find('.itemlist').append('<li>Test</li>');
        alert('ok');
    }   // post-submit callback 
};

Answer 1

调用它时，每个函数都会设置

this。您的代码如下所示：

// OUTSIDE the callback

var options = {             
       success: function() { 
         // INSIDE the callback
         $(this).parents('.trm_expense_cats').find('.itemlist').append('<li>Test</li>');
         alert('ok');
    }
};

// OUTSIDE the callback
$('#formSEIncome').ajaxForm(options)

您可能希望this在回调内外都是相同的值but it is not。回调设置了自己的this depending on how it is invoked值。这里，回调在运行时决定回调内的this值。

如果您想保存“外部”this，请参阅$(this) inside of AJAX success not working了解如何使用$.proxy。您还可以将外部this保存在回调之外的变量（通常名为that）中。由于JavaScript函数可以访问其包含函数的变量，因此回调可以访问that：

// OUTSIDE the callback
// save outer this
var that = this;

var options = {             
       success: function() { 
         // INSIDE the callback
         // we use that, not this, to get the outer this
         $(that).parents('.trm_expense_cats').find('.itemlist').append('<li>Test</li>');
         alert('ok');
    }
};

// OUTSIDE the callback
$('#formSEIncome').ajaxForm(options)

Answer 2

答案是使用jQuery插件中提供的成功功能，而不是我上面所做的。所以

事件处理程序：

$('#formSEIncome').ajaxForm(options)

选项变量：

var options = { 
        target:        this  // target element to be updated with server response 
        ,success:       showResponse          
};

成功功能：

function showResponse(responseText, statusText, xhr, $form)  { 
$form.parents('.trm_expense_cats').find('.itemlist').append('<li>Test</li>');
    alert('ok');
}

因此，在options.success对象中使用this解决了这个问题。

jQuery ajaxform提交回调问题

2 个答案: