programing

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

procenter 2023. 3. 14. 23:42
반응형

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

이 에러는 jquery 프레임워크에서 발생합니다.문서 준비 완료에 선택 목록을 로드하려고 하면 이 오류가 발생합니다.이 에러가 나는 이유를 찾을 수 없을 것 같습니다.

변경 이벤트에서는 동작하지만, 수동으로 기능을 실행하려고 하면 에러가 발생합니다.

Uncaught TypeError: 정의되지 않은 -> jquery-2.1.js:7300의 속성 'toLowerCase'를 읽을 수 없습니다.

여기 코드가 있습니다.

$(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"); 
        }
    });
}

전화할 때loadTeachers()DOMReady에서this가 되지 않을 것이다.#CourseSelect요소.

이 문제를 해결하려면change()의 이벤트#CourseSelectDOM의 부하에 따른 요소:

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

다른 방법으로 사용할 수 있습니다.$.proxy함수가 실행되는 컨텍스트를 변경하려면:

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

또는 위의 바닐라 JS에 상당합니다.bind():

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

저도 같은 문제가 있었습니다.어떤 셀렉트에서 변경을 들으려고 했는데 실제로는 셀렉트 오브젝트인 event.target이 아닌 event를 사용하고 있었습니다.

틀렸다:

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

정답:

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

이것은 나에게 효과가 있다!!!

파라미터가 없는 함수를 호출하다

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

파라미터를 사용한 함수 호출

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

에 액세스 하면, 에러가 발생합니다.$(this).val()변경 이벤트로 호출되었을 때this호출자를 가리킵니다. CourseSelect그래서 그것은 효과가 있고, 그리고 그 가치를 얻을 것이다.CourseSelect수동으로 호출하면this문서를 가리켜야 합니다. 그래서 당신은 그 문서를 통과해야 합니다.CourseSelect오브젝트 또는 직접 접근하기$("#CourseSelect").val()대신$(this).val().

실패"when trying to execute the function manually왜냐면 넌 다른 '이거'가 있거든이는 메서드를 수동으로 호출할 때 염두에 둔 것이 아니라 다른 것(아마도 window 객체 또는 수동으로 호출할 때 가지고 있는 컨텍스트 객체)을 참조합니다.

$(this).val()은 변경 이벤트 함수 범위에 없기 때문에 ajax 호출에 스코프가 없습니다.

이 경우 변경 이벤트 자체에 대해 먼저 ajax 호출이 구현될 수 있습니다.그런데 함수를 만들고 변경 이벤트에서 해당 funciton을 호출하면 $(this).val()의 범위가 유효하지 않습니다.

단순히 ID 셀렉터를 사용하여 값을 얻을 수 있습니다.

$(#CourseSelect).val()

전체 코드는 다음과 같습니다.

 $(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"); }
    });
}

언급URL : https://stackoverflow.com/questions/23723005/uncaught-typeerror-cannot-read-property-tolowercase-of-undefined

반응형