Question

我正在尝试使用jQuery.on（）中的jQuery.proxy（）方法进一步使用它，但由于涉及多个'this'的范围，我陷入了困境。

这是使用jQuery.proxy（）的经典方法：

var obj = {
  somevar: 'some value',
  doSomething: function() {
    alert(this.somevar);
  }
};
$('div').click( $.proxy(obj.doSomething, obj) ); // -> 'some value'

好的，但是......我想从'div'那里得到一些信息，把它发送到'doSomething'......

function Foo(element) {
  this.element = element;
  this.init();
}
Foo.prototype = {
  init: function () {
    this.element.on('click', 'button', $.proxy(function () {
      // trying to send the type of the button to the doSomething method
      this.doSomething( $(this).attr('type') );
    }, this));
  },
  doSomething: function (data) {
    alert(data); // -> 'undefined'
  }
};

var Bar = new Foo( $('div') );

当然它不起作用，因为'$（this）'中的'this'不是jQuery按钮对象... 我找到的唯一解决方案是修改'init'方法：

  init: function () {
    var that = this;
    this.element.on('click', 'button', function () {
      that.doSomething( $(this).attr('type') );
    });
  },

有没有办法使用$ .proxy（）方法代替这个'那个'变量？

Answer 1

如果将不同的this绑定到事件处理程序，则自然不能使用this来引用事件发生的元素。您的选择是接受传递给处理程序的事件参数（例如，e），然后使用e.target（事件源自的元素）或e.currentTarget（元素为您挂钩了该事件，如果您不使用this，通常为$.proxy。

例如，考虑：

<div id="foo"><span>Click here</span></div>

和

$("#foo").on("click", $.proxy(function(e) {
    // code here
}, someObject));

如果您点击上面的span（文字Click here），那么从code here开始，e.target就是范围（事件实际发生的地方），{{ 1}}是e.currentTarget（您挂钩事件的地方），当然div是this。

Live Example | Source

使用jQuery.proxy（）和jQuery.on（）方法查询范围

1 个答案: