使用JQuery的Javascript范围

Question

I am having trouble understanding why this is occurring. Here is a simplified version of my code:

$( document ).ready(function() {

  var mFormHelper = new FormHelper("form_add_ftransaction");
  var mThing = $("#mThing");

  form_add_ftransaction.submit(function(event){

    //var mFormHelper = new FormHelper("form_add_ftransaction"); <-- unless i uncomment this it doesn't seem to work

    var mloader = new Loader();

    mloader.setLoading(mThing);//<----- mThing is available in scope...

    mFormHelper.clearForm(); //<-------doesn't work unless mFormHelper is redeclared. Why not?

  });
});

Why is it that the variable 'mThing' is accessible inside the jQuery .submit(function(){}) but 'mFormHelper' is not?

The error I get if i don't redeclare the mFormHelper is "Uncaught TypeError: Cannot read property 'find' of undefined"

The FormHelper class is:

function FormHelper(formId){
    context = this;  //<--------------------------THIS WAS THE PROBLEM
    this.form = $("#"+formId);
    this.validate = function(){
        var valid = true;
        var requiredFields = context.form.find(".required");

        requiredFields.each(function(){
            $(this).removeClass("form_highlight");
            var field = $(this);
            if(field.attr("type") !=""){
                field.type = field.attr("type");
            }
            //alert(field.attr("data-type"));
            if(field.attr("data-type") == "radiogroup"){
                if(field.find("input:checked").get() ==""){

                    field.addClass("form_highlight");
                    valid = false;
                    return true;
                }
            }
            if((field.val() == "" || field.val() == null) && field.attr("data-type") != "radiogroup"){

                field.addClass("form_highlight");
                valid = false;
            }


        });
        return valid;
    };
/**
 * Method markRequiredFields
 *
 * Adds an asterisk in front of label for all required fields in the form. required fields are noted with the '.required' class.
 */
this.markRequiredFields = function(){
    var requiredFields = context.form.find(".required");
    requiredFields.each(function(){
        field = $(this);
        var label = $("label[for='"+field.attr('id')+"'");
        var str = label.html();
        if(str != undefined){
            label.html("*"+str.replace("*", ""));
        }

    });
}
this.clearForm = function (){
        this.form.find(':input').not(':button, :submit, :reset, :hidden, :checkbox, :radio').val('');
        this.form.find(':checkbox, :radio').prop('checked', false);
        this.form.removeAttr("class", "form_highlight");

}

}

Answer 1

So I solved the issue after your helpful comments instructed me that it should be in scope.

In my FormHelperClass the problem was:

function FormHelper(formId){
    context = this;  //<-------THIS WAS THE PROBLEM
    this.form = $("#"+formId);
    this.validate = function(){
        $valid = true;
    .......

should have been

var context = this;

always something so simply...

thanks guys.