jQuery this()似乎不起作用

时间:2013-02-24 04:35:10

标签: javascript jquery html ajax this

我有这个简单的形式&验证和一切都很好,除了'这'指向,好吧,我不知道是什么:

$('#contact').validator().submit(function(e){
        e.preventDefault();
        $.ajax({
          type: "POST",
          url: this.action,
          data: { 
            mail: jQuery('input[name="mail"]').val(), 
            message: jQuery('textarea[name="message"]').val(),
          success: function(){
            $(this).hide();
          }
        }); 
    });

我希望此代码在成功时隐藏#contact但这种情况永远不会发生。

我尝试了alert(this),但是我得到了[object Object],当我console.log( $(this) )时就发生了同样的情况(只有+旁边的对象,当我点击+我看到除了这个元素的类/ id之外的各种数据:()。有什么想法吗?我的代码有什么问题吗?

2 个答案:

答案 0 :(得分:1)

你失去了背景。在submit函数#contact元素是上下文。在ajax回调中,ajax设置是上下文。

来自jQuery文档:

  

所有回调中的this引用是上下文中的对象   选项在设置中传递给$ .ajax;如果未指定上下文,   这是对Ajax设置本身的引用。

$('#contact').validator().submit(function (e) {
  e.preventDefault();

  var self = this;

  $.ajax({
    type: "POST",
    url: this.action,
    data: {
      mail: jQuery('input[name="mail"]').val(),
      message: jQuery('textarea[name="message"]').val(),
      success: function () {
        $(self).hide();
      }
    });
  });
});

答案 1 :(得分:1)

this方法的上下文中的

success没有引用被点击的元素,你应该缓存元素:

$('#contact').validator().submit(function(e){
        e.preventDefault();
        var $this = $(this); // cache the object
        $.ajax({
          type: "POST",
          url: this.action,
          data: { 
            mail: jQuery('input[name="mail"]').val(), 
            message: jQuery('textarea[name="message"]').val()
          }, // missing }
          success: function(){
            $this.hide();
          }
        }); 
});