jQuery报错：Jquery apply is not a function

#web

问题

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 
});

参考

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

评论