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

Question

我有一個對象。 它具有一些屬性，一個DOM元素的初始化函數以及該DOM元素的事件處理程序。

我希望事件處理程序可以訪問該對象的屬性。 我正在使用.bind（this），但是它說“無法調用未定義的方法” bind”。 我究竟做錯了什么？

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選擇器（“測試”表單）傳遞給init（）方法。

2.）在init內部，將當前表單輸入值存儲到SignUpForm2屬性。 提交事件處理程序將接管控制權，並通過parentObj變量將控制權傳遞給“ handleFormSubmit”。 注意-我在這里放置了e.preventDefault（）方法，而不是將其放在“ handleFormSubmit”中，因為這對我來說更有意義。

3.）在“ handleFormSubmit”內部，我使用“ this”來引用存儲的對象屬性。 我將它們分配給本地var，所以我們在ajax方法中沒有“這個”范圍的麻煩。 然后，我使用本地變量來進行ajax POST。

順便說一句：保羅的方法也應該起作用。 我認為開發人員創建對象的方式取決於情況。 由於您創建了文字對象結構，因此我堅持使用這種方法。