在事件处理程序上使用bind（this）

Question

我有一个对象。它具有一些属性，DOM元素的初始化函数以及该DOM元素的事件处理程序。

我想我的事件处理程序有权访问该对象的属性。我正在使用.bind（this），但它说“不能调用方法”绑定“未定义”。我究竟做错了什么？

var SignUpForm2 = { 
    eForm: null, 
    eEmailInput: null, 
    ePasswordInput: null, 
    signUpURL: null, 
    email: null, 
    password: null, 

    handleFormSubmit: function() { 
     e.preventDefault(); 

     this.email = this.eEmailInput.val(); 
     this.password = this.ePasswordInput.val(); 

     $.ajax({ 
      type: "POST", 
      url: this.signUpURL, 
      data: { 
       email: this.email, 
       password: this.password 
      }, 
      success: function(response){ 

      } 
     }); 
    }, 

    init: function(eForm) { 
     this.eForm = eForm; 
     this.eEmailInput = this.eForm.find('input[name="email"]'); 
     this.ePasswordInput = this.eForm.find('input[name="password"]'); 
     this.signUpURL = "/index.php/ajax/user-sign-up-via-email"; 

     this.eForm.submit(this.handleFormSubmit.bind(this)); 
    }, 
} 

Answer 1

我有一个的jsfiddle有一些小的调整你的代码工作：

http://jsfiddle.net/nickadeemus2002/8sX75/

HTML：

<form id="test"> 
    <p>test form</p> 
    <label>email</label> 
    <input type="text" value="" name="email"/> 
    <br /> 
    <label>password</label> 
    <input type="text" value="" name="password"/> 
    <input type="submit" /> 
</form> 

的javascript：

var SignUpForm2 = { 
    eForm: null, 
    eEmailInput: null, 
    ePasswordInput: null, 
    signUpURL: null, 
    email: null, 
    password: null, 
    handleFormSubmit: function() { 
    var formEmail = this.eEmailInput.val(); 
     var formPassword = this.ePasswordInput.val(); 
     var formSignUpUrl = this.signUpURL; 

     console.log(formEmail); 
     console.log(formPassword); 
     console.log(formSignUpUrl);  
     console.log('ajax POST to server'); 

    /* 
     //notice new vars to pass along 
    $.ajax({ 
     type: "POST", 
     url: formSignUpURL, 
     data: { 
      email: formEmail, 
      password: formPassword 
     }, 
     success: function(response){ 

     } 
    }); 
    */   
    }, 
    init: function(eForm) {  
     var parentObj = SignUpForm2;   
     this.eForm = eForm; 
     this.eEmailInput = this.eForm.find('input[name="email"]'); 
     this.ePasswordInput = this.eForm.find('input[name="password"]'); 
     this.signUpURL = "/index.php/ajax/user-sign-up-via-email"; 
//this.eForm.submit(this.handleFormSubmit.bind(this));     

     this.eForm.submit(function(e){ 
      e.preventDefault();  
      parentObj.handleFormSubmit(); 
     }); 
    }, 
} 

$(document).ready(function(){ 
    //create instance 
    SignUpForm2.init($('#test')); 

}); 

所以这里是我的方法。

1.）使用SignUpForm2对象将有效的jquery选择器（“test”形式）传递给init（）方法。

2.）在init中，将当前表单输入值存储到SignUpForm2属性中。提交事件处理程序接管并通过parentObj变量将控制权交给“handleFormSubmit”。注意 - 我把e.preventDefault（）方法放在这里，而不是放在“handleFormSubmit”中，因为它对我更有意义。

3.）在“handleFormSubmit”内部，我使用“this”来引用存储的对象属性。我将它们分配给本地变量，所以我们在ajax方法中没有“this”范围头痛。然后，我使用本地变量来制作您的ajax POST。

顺便说一句：保罗的方法应该也可以。我认为开发人员创建对象的方式是基于情况的偏好问题。既然你创建了一个字面对象结构，我仍然坚持这种方法。