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

顺便说一句：保罗的方法也应该起作用。 我认为开发人员创建对象的方式取决于情况。 由于您创建了文字对象结构，因此我坚持使用这种方法。