未捕获的类型错误：无法读取未定义的属性“toLowerCase”答案

【问题标题】：Uncaught TypeError: Cannot read property 'toLowerCase' of undefined未捕获的类型错误：无法读取未定义的属性“toLowerCase”
【发布时间】：2014-07-06 13:02:13
【问题描述】：

我收到此错误，它源自 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"); 
        }
    });
}

【问题讨论】：

标签： javascript jquery ajax

【解决方案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'));

【讨论】：

【解决方案2】：

我遇到了同样的问题，我试图在某些选择上监听更改，实际上问题是我使用的是事件而不是 event.target，它是选择对象。

不正确：

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

正确：

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

【讨论】：

在我的特殊情况下，我必须更改 "$(this).val();"到 "$(this.target).val();"
但如果我们能提供帮助，我们希望避免使用this。使用this 会使代码更难维护。
? 非常感谢！

【解决方案3】：

这对我有用！！！

调用不带参数的函数

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

带参数调用函数

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

【讨论】：

【解决方案4】：

当您访问$(this).val() 时，当它被更改事件this 指向调用者即CourseSelect 时，它会导致错误，因此它正在工作并且将获得CourseSelect 的值。但是当您手动调用它时，this 指向文档。因此，要么您必须传递 CourseSelect 对象，要么直接访问 $("#CourseSelect").val() 而不是 $(this).val()。

【讨论】：

【解决方案5】：

它失败了“when trying to execute the function manually”，因为你有一个不同的'this'。这将不是指手动调用该方法时您想到的东西，而是其他东西，可能是窗口对象，或者您在手动调用时拥有的任何上下文对象。

【讨论】：

【解决方案6】：

您的 $(this).val() 在您的 ajax 调用中没有作用域，因为它不在更改事件函数作用域中

可能是您首先在更改事件本身中实现了该 ajax 调用，在这种情况下它可以正常工作。但是当你创建一个函数并在更改事件中调用该函数时，$(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"); }
    });
}

【讨论】：