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属性。 submit事件处理程序接管并通过parentObj变量将控制权传递给“handleFormSubmit”。注意 - 我在这里放置了e.preventDefault（）方法，而不是将它放在“handleFormSubmit”中，因为它对我来说更有意义。

3.。）在“handleFormSubmit”中，我使用“this”来引用存储的对象属性。我将它们分配给了本地变量，因此我们在ajax方法中没有“这个”范围的麻烦。然后我使用本地变量来制作你的ajax POST。

顺便说一句：保罗的方法也应该有效。我认为开发人员创建对象的方式取决于具体情况。由于你创建了一个文字对象结构，我坚持这种方法。

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

1 个答案: