从javascript对象中的事件处理程序访问变量

时间:2014-05-29 09:16:14

标签: javascript jquery oop event-handling

我尝试创建一个jQuery类来在提交表单时验证输入字段。我在同一页面中有不同的表单,我需要为每个表单创建一个验证器实例。

HTML

<form method="post" action="index.php" id="form1">
  <input type="submit" value="Send" />
</form>

<form method="post" action="index.php" id="form2">
  <input type="submit" value="Send" />
</form>

<script type="text/javascript">
var form1 = new DataValidator('#form1');
var form2 = new DataValidator('#form2');
</script>

我会从提交事件处理程序访问对象变量,但是当我打印this.selector变量时,我看到undefined值。

的JavaScript

function DataValidator(selector)
{
  this.form = $(selector);
  this.selector = selector;

  $(selector).submit(function() 
  {
    alert('submit ' + this.selector);
    return false;
  });
}

1 个答案:

答案 0 :(得分:3)

this不是局部变量,因此它不会保存在闭包中。您需要将其保存在本地变量中。在jQuery事件处理程序中,this始终绑定到事件的目标。

function DataValidator(selector)
{
  this.form = $(selector);
  this.selector = selector;
  var self = this;

  this.form.submit(function() 
  {
    alert('submit ' + self.selector);
    return false;
  });
}