잡히지 않은 TypeError : 정의되지 않은 'toLowerCase'속성을 읽을 수 없습니다.

Question

이 오류가 발생하며 jquery 프레임 워크에서 발생합니다. 문서에서 선택 목록을로드하려고하면이 오류가 발생합니다. 왜이 오류가 발생하는지 찾을 수 없습니다.

변경 이벤트에서 작동하지만 수동으로 함수를 실행하려고하면 오류가 발생합니다.

Uncaught TypeError: Cannot read property 'toLowerCase' of undefined -> jquery-2.1.1.js:7300

다음은 '이'다른이 있기 때문에 그것은 "when trying to execute the function manually"실패 코드

$(document).ready(function() { 
    $("#CourseSelect").change(loadTeachers); 
    loadTeachers(); 
}); 

function loadTeachers() { 
    $.ajax({ 
     type: 'GET', 
     url: '/Manage/getTeachers/' + $(this).val(), 
     dataType: 'json', 
     cache: false, 
     success:function(data) { 
      $('#TeacherSelect').get(0).options.length = 0;  
      $.each(data, function(i, teacher) { 
       var option = $('<option />'); 
       option.val(teacher.employeeId); 
       option.text(teacher.name); 
       $('#TeacherSelect').append(option); 
      }); 
     },   
     error: function() { 
      alert("Error while getting results"); 
     } 
    }); 
} 

Answer 1

DOMReady에서 loadTeachers()을 호출하면 this의 컨텍스트는 #CourseSelect 요소가 아닙니다.

당신은 DOM의 부하에 #CourseSelect 요소에 change() 이벤트를 트리거하여이 문제를 해결할 수 있습니다

$("#CourseSelect").change(loadTeachers).change(); // or .trigger('change'); 

또는 함수에서 실행 컨텍스트 변경 $.proxy를 사용할 수 있습니다

$("#CourseSelect").change(loadTeachers); 
$.proxy(loadTeachers, $('#CourseSelect'))(); 

을 또는 위의 바닐라 JS에 상응하는 것, bind() :

$("#CourseSelect").change(loadTeachers); 
loadTeachers.bind($('#CourseSelect')); 

Answer 2

입니다. 이것은 메소드를 수동으로 호출 할 때 염두에 두어야 할 것이 아니라, 다른 것, 아마도 윈도우 객체 또는 수동으로 호출 할 때 가지고있는 컨텍스트 객체를 의미 할 것입니다. 당신이 즉 CourseSelect이 때문에 작동하고 this 점 호출자에 변경 이벤트에 의해 호출 및 CourseSelect의 가치를 얻을 때 $(this).val()에 액세스 할 때

Answer 3

그것은 오류가 발생합니다. 수동으로 전화 할 때 this은 문서를 가리키고 있습니다. 따라서 $(this).val() 대신 $("#CourseSelect").val()과 같은 CourseSelect 개체 나 액세스 권한을 직접 전달해야합니다.

Answer 4

같은 문제가 있었는데 일부 선택에서 변경 내용을 듣고 자 노력했지만 실제로는 select 개체 인 event.target 대신 이벤트를 사용하고있었습니다.

잘못된 예 :

$(document).on('change', $("select"), function(el) { 
    console.log($(el).val()); 
}); 

올바른 :

$(document).on('change', $("select"), function(el) { 
    console.log($(el.target).val()); 
}); 

Answer 5

당신의 $ (이) (.val)는 아약스 호출에는 범위가없는이 아니 변화 이벤트 기능 때문에 scope

변경 이벤트 자체에서 AJAX 호출을 먼저 구현하면 좋을 수도 있습니다. 하지만 u가 함수를 만들고 change 이벤트에서 해당 함수를 호출하면 $ (this) .val()의 범위가 유효하지 않습니다.

은 단순히 다음과 같이해야한다 대신

$(#CourseSelect).val() 

전체 코드 ID 선택기를 사용하여 값을 얻을 :

$(document).ready(function() 
{ 
    $("#CourseSelect").change(loadTeachers); 
    loadTeachers(); 
}); 

function loadTeachers() 
{ 
    $.ajax({ type:'GET', url:'/Manage/getTeachers/' + $(#CourseSelect).val(), dataType:'json', cache:false, 
     success:function(data) 
     { 
      $('#TeacherSelect').get(0).options.length = 0;  

      $.each(data, function(i, teacher) 
      { 
       var option = $('<option />'); 
       option.val(teacher.employeeId); 
       option.text(teacher.name); 
       $('#TeacherSelect').append(option); 
      }); 
     }, error:function(){ alert("Error while getting results"); } 
    }); 
} 

Answer 6

이 나를 위해 작동!

전화 매개 변수가없는 기능

$("#CourseSelect").change(function(e1) { 
    loadTeachers(); 
}); 

전화 내 특정 경우 매개 변수

$("#CourseSelect").change(function(e1) { 
    loadTeachers($(e1.target).val()); 
});