javascript - 未捕获的类型错误 : Cannot read property 'toLowerCase' of undefined

Question

我收到此错误，它源自 jquery 框架。当我尝试在准备就绪的文档上加载选择列表时，出现此错误。我似乎无法找到我收到此错误的原因。

它适用于更改事件，但我在尝试手动执行该功能时遇到错误。

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

这是代码

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

或者上面的 vanilla JS 等价物，bind():

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