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

Please help me. This is an error when I use jQuery in ASP.NET MVC.

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

The code that causes this is:

$('#btnClick').click(function(){   //code })

In my case the error was caused by binding events to functions that didn't exist. I had removed functions that I didn't know was bound to events.

See snippet below:

var foo = {
  bar1: function(){
    alert('working');
  }
};

// Working
$('body').on('click', '.my-button', foo.bar1);

// Not Working because bar2 doesn't exist
$('body').on('click', '.my-button', foo.bar2);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="my-button">Click me</span>

It will produce:

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

If this is helpful to anyone this can be also because an event handler function is declared twice.

A coworker of mine coded the event as 'on' twice and I solved (Fool challenge by the way).

For example if you have a typing mistake:

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

Must be:

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

In my case I had typed

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

When I had meant to type:

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

changing that click to on removed the error.

I had an event bound on a selector that didn't exist anymore.

$(document).on('click', '.js-test', App.test);

I deleted the .js-test div and forgot. That was causing the error on my end.

I guess it's a little late, but to anyone encountering this issue: check your html code for multiple jquery imports. Any additional import might mess up previously registered handles/plugins/etc.

I encountered the same issue recently. I found that it was my mistake in handling jquery events. Instead of

$('#btnClick').click(function(){   //code })

Try this,

$('#btnClick').on('click', function(){   //code })

It worked for me. Hope it helps.

Another way I've gotten this error is by absentmindedly putting a function where a function name should go:

wrong:

$('.foo').click($('.bar').trigger('click'));

right:

$('.foo').click(function () {
  $('.bar').trigger('click');
});

also right:

$('.foo').click(triggerBarClick);

function triggerBarClick() {
  $('.bar').trigger('click');
}

In my case it worked after declaring the delegation inside $(document).ready( function() {});

The only fix for me was to return false at the end.

var button = $('<button>').click(function () {
    // do something
    return false;
});

See this question. It had to do with propagation.

This problem happens, try to adding listener not existing html object. if too many listener you have and you cant found which element not exist, debug jquery file after beauty format.

in jquery file, find dispatch function. at second dimension for loop statement add OR operator and log t variable;

> || console.log(t)

                  for (t.currentTarget = o.elem, i = 0;
                        (r = o.handlers[i++]) && !t.isImmediatePropagationStopped();)(!t.namespace_re || t.namespace_re.test(r.namespace)) && (t.handleObj = r, t.data = r.data, s = ((p.event.special[r.origType] || {}).handle || r.handler).apply(o.elem, l) || console.log(t), void 0 !== s && (t.result = s) === !1 && (t.preventDefault(), t.stopPropagation()));

Read last throwed console response before error. It's help find which element not exist in html doc.

Finally check html obj exist in doc with jquery, problem will be solved.

			if($('.cartProduct .close-button').length>0)
			   $('.cartProduct .close-button').click(function{

			   });

For me this happens when resizing the window. My colleague had written a resize event on an element which he later removed. So when resizing the window later on jQuery will check for the element, and throws error this if it couldn't find.

In my case "{ passive: true }" caused the problem:

$('#defaultSearchbar .dropdown-menu li').on('click', function () {
     //Something here, not important
}, { passive: true });

> Uncaught TypeError: ((i.event.special[f.origType] || {}).handle || f.handler).apply is not a function

Fixed by removing it:

$('#defaultSearchbar .dropdown-menu li').on('click', function () {
     //Something here, not important
});

Had the same error when declaring functions that not existed yet, even though i didn't call them just declared. Maybe this is your case

It may help some newbie like me so pasting what I was doing wrong:

Wrong:

$(function(){
$('#submitButton').click($(function(){
    ......
}));

Right:

$(function(){
$('#submitButton').click(function(){
  .........
 });

Notice I removed the $ sign before the function. I am new to jQuery so I do not know why it did not work.

I will update this answer once I find out.

Binding multiple events to a single ID or class, or binding events in the wrong manner can cause this issue.

In my case, I had this error due to this mistake:

$('body').on('change', '.btnAddNewRow').click(function () {