在事件處理程序上使用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。

順便說一句：保羅的方法應該也可以。我認爲開發人員創建對象的方式是基於情況的偏好問題。既然你創建了一個字面對象結構，我仍然堅持這種方法。