Uncaught TypeError: kan eigenschap ‘toLowerCase’ van undefined niet lezen

Ik krijg deze foutmelding en deze is afkomstig van het jQuery-framework.
Wanneer ik probeer een geselecteerde lijst op het document klaar te laden, krijg ik deze foutmelding.
Ik kan niet vinden waarom ik deze foutmelding krijg.

Het werkt voor de change-gebeurtenis, maar ik krijg de foutmelding wanneer ik de functie handmatig probeer uit te voeren.

Uncaught TypeError: kan eigenschap ‘toLowerCase’ van undefined -> niet lezen jquery-2.1.1.js:7300

Hier is de code

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

Antwoord 1, autoriteit 100%

Als je loadTeachers()aanroept op DOMReady, zal de context van thisniet het #CourseSelectelement zijn.

Je kunt dit oplossen door een change()-gebeurtenis te activeren op het #CourseSelect-element bij het laden van de DOM:

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

U kunt ook $.proxygebruiken om de context te wijzigen waaronder de functie wordt uitgevoerd:

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

Of het vanille JS-equivalent van het bovenstaande, bind():

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

Antwoord 2, autoriteit 54%

Ik had hetzelfde probleem, ik probeerde te luisteren naar de verandering van een select en het probleem was eigenlijk dat ik de gebeurtenis gebruikte in plaats van het event.target dat het geselecteerde object is.

ONJUIST :

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

JUIST :

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

Antwoord 3, autoriteit 10%

Dit werkt voor mij !!!

Een functie aanroepen zonder parameter

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

Een functie met parameter aanroepen

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

Antwoord 4, autoriteit 8%

Het veroorzaakt de fout wanneer u $(this).val()opent wanneer het wordt aangeroepen door change-gebeurtenis thisverwijst naar de aanroeper, dwz CourseSelectdus het werkt en krijgt de waarde van CourseSelect. maar als je het handmatig thisnoemt, verwijst dit naar document. dus u moet ofwel het object CourseSelectdoorgeven of rechtstreeks toegang krijgen zoals $("#CourseSelect").val()in plaats van $(this).val().

Antwoord 5, autoriteit 4%

Het mislukt “when trying to execute the function manually” omdat u een andere ‘dit’ heeft. Dit verwijst niet naar wat je in gedachten hebt als je de methode handmatig aanroept, maar naar iets anders, waarschijnlijk het window-object, of welk contextobject dan ook dat je hebt als je de methode handmatig aanroept.

Antwoord 6, autoriteit 2%

uw $(this).val() heeft geen bereik in je ajax-aanroep, omdat het niet in de functiebereik van de wijzigingsgebeurtenis is

Misschien heb je die ajax-aanroep eerst in je change-gebeurtenis zelf geïmplementeerd, in dat geval werkt het prima.
maar wanneer u een functie hebt gemaakt en die functie in een wijzigingsgebeurtenis hebt aangeroepen, is het bereik voor $(this).val() niet geldig.

haal de waarde gewoon op met id selector in plaats van

$(#CourseSelect).val()

de hele code zou er zo uit moeten zien:

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