在事件处理程序上使用 bind(this)答案

【问题标题】：Using bind(this) on an event handler在事件处理程序上使用 bind(this)
【发布时间】：2013-06-26 16:27:00
【问题描述】：

我有一个对象。它有一些属性、一个 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));
    },
}

【问题讨论】：

有效：jsfiddle.net/v3678/1
@Cherniv - 你怎么知道？看来您不能提交该表单...
DOM form.submit() 方法不带参数。
你怎么打电话给init？
我不认为submit 是问题（还），我认为有上下文问题需要解决 - 目前正在使用 jsfiddle。了解您如何调用init 会很有用。你只是打电话给signup.init();吗？

标签： javascript jquery oop bind

【解决方案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”来引用存储的对象属性。我将它们分配给本地变量，因此我们在 ajax 方法中没有“this”范围问题。然后我使用本地 vars 来制作你的 ajax POST。

顺便说一句：Paul 的方法也应该有效。我认为开发人员创建对象的方式是基于情况的偏好问题。由于您创建了一个字面对象结构，所以我坚持使用这种方法。

【讨论】：