问题
jquery error:
Uncaught TypeError: ((x.event.special[i.origType] || (intermediate value)).handle || i.handler).apply is not a function
思路
可能的问题来源
按照网上的方法一一排查
- 事件监听的函数没有具体内容
// Not Working
$('#btnClick').click(function(){ //code })
- 调用的方法不存在
var foo = {
bar1: function(){
alert('working');
}
};
// Not Working because bar2 doesn't exist
$('body').on('click', '.my-button', foo.bar2);
// Working
$('body').on('click', '.my-button', foo.bar1);
- 手误绑定了两次
// Not Working
$(document).on('change', '#selectInput').on('change', '#selectInput', function () {});
// Working
$(document).off('change', '#selectInput').on('change', '#selectInput', function () {});
- 监听写法错误
// Not Working
$('body').click('click','.delete_item',function(e){})
// Working
$('body').on('click','.delete_item',function(e){})
- 监听事件handler不是function
// Not Working
$('.foo').click($('.bar').trigger('click'));
// Working
$('.foo').click(function () {
$('.bar').trigger('click');
});
- 监听的元素不存在
// Not Working if '.js-test' didn't exist anymore.
$(document).on('click', '.js-test', App.test);
一般情况下,监听写的不多,或者已知最近改了哪几个地方,是可以查出来的。但是如果元素特别多,一眼看不出来的情况,就需要使用点调试手段。
如何调试出问题点?
步骤:
- 格式化format jquery
- 找到报错的地方,在后面打印event的console,参考如下打印方法:
((p.event.special[r.origType] || {}).handle || r.handler).apply(o.elem, l) || console.log(t)
- 复现bug,在报错出现后,找到报错之前的console日志,点开event找到handleObj.handler,一般情况下这个handler是一个function,你可以看看其他正常的情况,但是在这里,这可能是一个对象或者字符串,所以在这之后绑定的apply会报错,这时候就能根据这里的信息,去代码里搜索定位了。
比如我的错误是这样的,我在这个位置的handler是
{
guid: 12
preventScroll: true
}
是一个对象,随机搜索’preventScroll’发现了一段代码
$("#" + selector).attr("tabindex", 0).focus({
preventScroll: true
});
但是focus里面是支持这种写法的,所以删除tabindex即可
$("#" + selector).focus({
preventScroll: true
});