[解決済み] Uncaught TypeError: 未定義のプロパティ 'toLowerCase' を読み取れませんでした。

質問

このエラーは、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"); 
        }
    });
}

解決方法は？

を呼び出すと loadTeachers() のコンテキストは DOMReady になります。 this にはなりません。 #CourseSelect 要素を使用します。

をトリガーにすることで修正できます。 change() イベントを #CourseSelect 要素の読み込み時に

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

あるいは $.proxy を使用すると、関数が実行されるコンテキストを変更することができます。

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

あるいは、上記のバニラJSに相当するもの。 bind() :

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