Question

我有以下方法

PMm.test = function (){
  ....plenty of code....

  $('.element',this.page).click(function(e){
    e.preventDefault();
    var self = $(this);
    console.log(self);
    this.load(someoptions)
  }.bind(this));

  ...plenty of code....

}

PMm.test.prototype.load = function(options){
  ...some code
}

当console.log(self)时，它会返回方法PMm.test。如果$(this)是我声明我的事件的整个函数范围，我如何访问单击的元素？知道我还需要调用稍后声明的.load()方法。

Answer 1

我认为最好将上下文存储在变量中，并在回调中使用闭包来访问它。它会导致更易读的代码。

PMm.test = function (){
  ....plenty of code....
  // Store the context in a variable.    
  var that = this;
  $('.element',this.page).click(function(e){
    e.preventDefault();
    // this here references the DOM element (as expected)
    var self = $(this);
    console.log(self);
    // you can access your methods through that.
    that.load(someoptions)
  });

  ...plenty of code....

}

PMm.test.prototype.load = function(options){
  ...some code
}

希望它有所帮助。

Answer 2

由于您将this用于其他内容（因为bind），您可以使用以下任一项：

e.target - 这是事件实际发生的元素，可能是您将处理程序附加到的元素的后代。

或
e.currentTarget - 这是处理程序附加到的元素。（如果不使用this，jQuery回调中的bind通常是什么。）

E.g：

PMm.test = function (){
  // ....plenty of code....

  $('.element',this.page).click(function(e){
    e.preventDefault();
    var elementClicked = $(e.currentTarget); // or $(e.target);
    // ...use it...
    this.load(someoptions)
  }.bind(this));

示例：

function ClickResponder(name, selector) {
  this.name = name;
  $(selector).on("click", this.handler.bind(this));
}
ClickResponder.prototype.handler = function(e) {
  console.log("this.name = " + this.name);
  console.log("e.target.tagName = " + e.target.tagName);
  console.log("e.currentTarget.tagName = " + e.currentTarget.tagName);
};
new ClickResponder("respond-o-matic", ".foo");

<div>
  <div class="foo">
    <span>Click me</span>
  </div>
  <div class="foo">
    <span>Click me</span>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

使用[function].bind(this)绑定this（PMm.test）到jquery事件，覆盖由jquery设置的this（元素）。如果你需要在函数内部都不需要绑定对象，而是使用变量使对象PMm.test可访问：

PMm.test = function (){
  ....plenty of code....

  var obj=this; //obj references to PMm.test

  $('.element',this.page).click(function(e){
    e.preventDefault();
    var self = $(this);
    console.log(self);
    obj.load(someoptions)
  }); //no .bind()

  ...plenty of code....

}

PMm.test.prototype.load = function(options){
  ...some code
}

访问单击的特定元素

3 个答案: