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

Posted 2023-04-12

【中文标题】未捕获的类型错误：无法读取未定义的属性“toLowerCase”

【英文标题】：Uncaught TypeError: Cannot read property 'toLowerCase' of undefined

【发布时间】：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"); 
        
    );

【参考方案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"); 
    );