独书先生 Menu

jquery error Uncaught TypeError: ((x.event.special[i.origType] || (intermediate value)).handle || i.handler).apply is not a function

问题

jquery error:

Uncaught TypeError: ((x.event.special[i.origType] || (intermediate value)).handle || i.handler).apply is not a function

思路

可能的问题来源

按照网上的方法一一排查
1. 事件监听的函数没有具体内容

// Not Working
$('#btnClick').click(function(){   //code })
  1. 调用的方法不存在
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);

  1. 手误绑定了两次
// Not Working
$(document).on('change', '#selectInput').on('change', '#selectInput', function () {});

// Working
$(document).off('change', '#selectInput').on('change', '#selectInput', function () {});

  1. 监听写法错误
// Not Working
$('body').click('click','.delete_item',function(e){})

// Working
$('body').on('click','.delete_item',function(e){}) 

  1. 监听事件handler不是function
// Not Working
$('.foo').click($('.bar').trigger('click'));

// Working
$('.foo').click(function () {
  $('.bar').trigger('click');
});
  1. 监听的元素不存在
// Not Working if '.js-test' didn't exist anymore.
$(document).on('click', '.js-test', App.test);

一般情况下,监听写的不多,或者已知最近改了哪几个地方,是可以查出来的。但是如果元素特别多,一眼看不出来的情况,就需要使用点调试手段。

如何调试出问题点?

步骤:
1. 格式化format jquery
2. 找到报错的地方,在后面打印event的console,参考如下打印方法:

((p.event.special[r.origType] || {}).handle || r.handler).apply(o.elem, l) || console.log(t)
  1. 复现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 
});

参考

https://stackoverflow.com/questions/32231036/uncaught-typeerror-x-event-speciali-origtype-intermediate-value-handl