未捕获的 TypeError: 无法读取未定义的属性“ toLowerCase”

我得到了这个错误,它来自 jquery 框架。 当我试图在文档上加载选择列表时,我得到了这个错误。 我似乎不明白为什么我会得到这个错误。

它适用于更改事件,但是在手动执行函数时出现了错误。

未捕获的 TypeError: 无法读取未定义-> jquery-2.1.1. js: 7300的属性‘ toLowerCase’

这是密码

$(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");
}
});
}
296097 次浏览

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

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

在 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'));

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

错误:

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

正确答案:

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

$(this) . val ()在 ajax 调用中没有作用域,因为它不在 change event function 作用域中

可能您首先在您的变更事件本身中实现了 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"); }
});
}

这对我有用! ! !

不带参数调用函数

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

使用参数调用函数

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