56

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

This is an image of the error

3
  • 1
    Does it do that when you don't use the minified JQuery? Does it do it even when the click call back function just returns?
    – siva.k
    Aug 26, 2015 at 15:48
  • 1
    Probably not much help now, but I found that someone has checked in an incomplete click event: `$('body').on('click','.button') I removed the offending code and everything's fine! Jan 15, 2016 at 11:04
  • check to see if you are calling to any undefined function inside click event handler Nov 17, 2016 at 14:15

16 Answers 16

55

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

3
  • The same for me, even when the bind with the missing function was for a different target (i.e. .'my-button2'). Mar 13, 2017 at 11:45
  • This just saved my sanity! :) May 12, 2017 at 14:40
  • Thanks for leading me to my situation which was that I was binding to functions declared further down my JS file when I wasn't wrapping everything in $(document).ready so they weren't initialized yet. Jul 24, 2018 at 13:36
11

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 () {});
5

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.

2

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.

1

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.

1

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.

3
  • 4
    This should not make a difference. The former is just an alias for the latter.
    – Gautham C.
    Mar 29, 2016 at 23:09
  • 1
    ...well, that's a bit dangerous to imply they are the same; when the later works for subsequent instances of the selector.
    – doublejosh
    May 17, 2016 at 19:54
  • api.jquery.com/click "This method is a shortcut for .on( 'click', handler )".
    – Axel
    Mar 25, 2021 at 10:31
1

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

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

1

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.

1

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.

enter image description here

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

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

               });
0

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.

0

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

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

1
  • 1
    This could have been just a comment: an answer should provide a working solution that could be used to "close the case", while this is just a hint Feb 13, 2019 at 13:26
0

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.

0

In my own case, after going through suggestions here, I had to remove an event listener. See code below:

// Did not work
var myInterval = setInterval(() => {
    selectedDiv.click(selectedDiv.toggleClass("pressed"))
  }, 120);

  selectedDiv.click(function(){
    selectedDiv.removeClass('pressed')
    clearInterval(myInterval);
  })

}

//Worked for me
var myInterval = setInterval(() => {
(selectedDiv.toggleClass("pressed")
  }, 120);

  selectedDiv.click(function(){
    selectedDiv.removeClass('pressed')
    clearInterval(myInterval);
  })

}

-1

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 () {

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.