Question

在jQuery中单击按钮时，我需要隔离附加到按钮的值。但是，我还需要在$.proxy(...)中包含click处理程序，以便为后续函数调用维护上下文：

$('#' + tab.buttonId).click($.proxy(function() {
   this.pop($(this).val());
}, this));

this.pop需要应用于对象
$（this）.val（）需要来自按钮

如何对this的每次调用引用正确的内容？

Answer 1

您可以使用e.target它将指向按钮对象：

$('#' + tab.buttonId).click($.proxy(function(e) {
   this.pop($(e.target).val());
}, this));

Answer 2

我认为你传递的内容应该在代理函数参数中：

$('#' + tab.buttonId).click($.proxy(function() {
   this.pop($(this).val());
}, this));

Answer 3

我会将上下文存储在变量中：

// the context
var that = this;
$('#' + tab.buttonId).click(function() {
   that.pop($(this).val());
});

这是一种常见做法，未来读者在不了解$.proxy

的情况下理解它

Answer 4

将事件对象用于您单击的事物。 <!DOCTYPE html> <html lang="en"> <head> <? $mark = 0; ?> <meta charset="UTF-8"> </head> <body> <div class="content-1"> <? if( $mark == 1 ){ ?> <p>This is content One!</p> <? } ?> </div> <div class="content-2"> <? if( $mark == 2 ){ ?> <p>This is content Two!</p> <? } ?> </div> <div class="content-3"> <? if( $mark == 3 ){ ?> <p>This is content Three!</p> <? } ?> </div> <script> $(document).ready(){ $(".content-1").click(function(){ //my attempt on changing the PHP variable $mark to 1 document.write( "<? echo $mark = 1; ?>" ); }); } </script> </body> </html>

e.target

function pop(val) {
  alert(val.text())
}

$('a').click($.proxy(function(e) {
  this.pop($(e.target));
}, this));

其他选项：使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <a href="#">Click Me</a>

Function.prototype.bind

或es6箭头函数，它将保留词汇$('a').click(function(e) { this.pop($(e.target)); }.bind(this));

this

在jQuery按钮代理函数中控制上下文

4 个答案: