Javascript JQuery를 사용하는 범위

왜 이러한 현상이 발생하는지 이해하는 데 문제가 있습니다.Javascript JQuery를 사용하는 범위

$(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? 

    }); 
});

왜이 변수 'mThing이'(함수() {})하지만 'mFormHelper은'JQuery와 .submit 내부에 액세스 할 수 없습니다되는 것을 : 여기에 내 코드의 단순화 된 버전은?

내가 mFormHelper가 재 선언하지 않으면 내가 오류 "catch되지 않은 형식 오류 : 부동산의 '발견'정의의 읽을 수 없습니다"

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"); 

}

}

출처

2014-12-28 Chris

UM 인 경우, 해당 예에서 범위 내에 있습니다. – epascarello

mFormHelper가 범위에 없다는 오류가 표시됩니까? 그럴 것 같아. 다른 일이 벌어지고있는 것처럼 보입니다. 콘솔에 어떤 오류가 있습니까? –

i 질문에 뭔가를 추가했습니다. 재발행 된 mFormHelper가 없으면 오류가 발생합니다. "유형 불일치 : 불량의 속성을 읽을 수 없습니다.".find가 .clearForm() 메소드에서 호출됩니다. – Chris

FormHelper 클래스입니다

그래서 도움이되는 의견이 그것이 범위에 있어야한다는 것을 알게 된 후에이 문제를 해결했습니다. 내 FormHelperClass에서

문제였다 :

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

은 ... 항상

들 덕분에 이렇게 간단하게 뭔가

var context = this;

를하고 있어야합니다.

출처

2014-12-28 15:52:30 Chris

크리스, 유사하게 몇 곳에서'var field = ...'가 필요합니다. –

그리고'context'는 정말로 필요하지 않습니다. 'context.form'에 대해서만 사용되었으므로'var $ form = $ ("#"+ formId); 대신에'context.form'을'$ form'으로 바꿉니다. –

FormHelper (즉, this.form = $ ("#"+ formId); "의 속성으로 양식을 할당 한 이유는 클래스 외부에서 (예 :'mFormHelper.form') if FormHelper 클래스 안에 $ form 변수에 접근 할 수 없다고 생각하는 것은 틀린가? 또한 변수'context = this;를 선언했다. '메서드 내에서'this'는 내가 원하는 것을 참조하지 않기 때문에 더 나은 메서드를 사용할 수 있습니다 .JavaScript와 OOP를 사용하는 것에 상당히 익숙합니다. – Chris

Javascript JQuery를 사용하는 범위

답변

관련 문제