代码之家 › 专栏 › 技术社区 › Jay Corbett

jQuery:当bind/click事件用于类时引用调用对象(this)

jquery javascript

Jay Corbett · 技术社区 · 17 年前

谢谢你阅读这篇文章。

$(this) ,我无法让它工作。任何想法都会有帮助。谢谢

“选择”旁边文本框的相关性是代码的第二部分…用于在“选择”中选择选项时更新文本框

.one 因此选择只更新一次,然后 .bind

$('.classSelect').one("click",
 function() {
  $.ajax({
   type: "post",
   url: myURL ,
   dataType: "text",
   data: {
    '_service' : myService,
    '_program' : myProgram ,
    'param' : myParams
   },
   success:
    function(request) {
     $(this).html(request);   // populate select box
   }    // End success
  }); // End ajax method

  $(this).bind("click",
   function() {
    $(this).next().val($(this).val());
  }); // End BIND
 }); // End One

 <select id="mySelect" class="classSelect"></select>
 <input type="text">

5 回复 | 直到 17 年前

Owen Ryan Doherty 17 年前

$(this) 仅在功能范围内相关。但在函数之外,它会丢失该引用:

$('.classSelect').one("click", function() {
   $(this); // refers to $('.classSelect')

   $.ajax({
   // content
      $(this); // does not refer to $('.classSelect')
   });
});

更好的处理方法可能是:

$('.classSelect').one("click", function() {
    var e = $(this);

    $.ajax({
    ...
        success : function(request) {
          e.html(request);
        }
    }); // end ajax

    $(this).bind('click', function() {
    // bind stuff

    }); // end bind

}); // end one

load() 方法我发现基本ajax更容易(因为它作用于包装集,而不是像 $.ajax() . 下面是我将如何使用 加载()

$('.classSelect').one('click', function() {
    var options = {
       type : 'post',
       dataType : 'text',
       data : {
         '_service' : myService,
         '_program' : myProgram ,
         'param' : myParams
       }           
    } // end options

    // load() will automatically load your .classSelect with the results
    $(this).load(myUrl, options);


    $(this).click(function() {
    // etc...

    }); // end click

}); // end one

philnash 17 年前

我认为这是因为连接到成功事件的函数不知道“this”是什么,因为它是独立于您在其中调用它的对象运行的。(我没有很好地解释,但我认为这与闭包有关。)

我认为如果在$.ajax调用之前添加以下行:

var _this = this;

   success:
    function(request) {
     _this.html(request);   // populate select box
   }

这很可能奏效

Josh 17 年前

$("select[class='classSelect']") ...

Claudio 17 年前

您需要关闭success函数范围内的变量,但真正需要的不是“this”,而是$(this)

因此:

var that = $(this);
... some code ...
success: function(request) {
  that.html(request)
}

Jay Corbett 17 年前

谢谢你,欧文。虽然可能有更好的方法来编写代码(使用链接)…但我的代码问题是$(this)在.ajax和.bind调用中不可用..因此将其存储在var中并使用该var是解决方案。

再次感谢。

$('.classSelect').one("click",
 function() {
  var e = $(this) ;

  $.ajax({
   type: "post",
   url: myURL ,
   dataType: "text",
   data: {
    '_service' : myService,
    '_program' : myProgram ,
    'param' : myParams
   },
   success:
    function(request) {
     $(e).html(request);   // populate select box
   }    // End success
  }); // End ajax method

  $(e).one("click",
   function() {
    $(e).next().val($(e).val());
  }); // End BIND
 }); // End One