CODEWITHSUNDEEP
javascriptjqueryerror-handlingtypeerrorgetscript
TheAmazingKnight
TheAmazingKnight

Reputation: 2474

How to resolve this error type 'Uncaught TypeError: (...) is not a function'?

I am aware of the another question like this on stackoverflow and have looked at it, but it doesn't answer/resolve my situation that I'm having from which the error has occurred.

I'm trying to make both scripts, embed.js (plugin) & more-content-arrow.js (my script) work properly on the page when the document loads. When and if I remove either script, one or the other will work but not both scripts together. When the page finishes loading first, it will load the more-content-arrow.js properly, then when it is trigged again by a scrolling event, it will give off this error message in the console browser:

VM249 embed.js:2 Uncaught TypeError: ((fe.event.special[s.origType] || (intermediate value)).handle || s.handler).apply is not a function
    at dispatch (VM249 embed.js:2)
    at m.handle (VM249 embed.js:2)

I tried to resolve it by adding a jQuery.noConflict();, but that doesn't work as I assume it could be a conflict between the two scripts. The only way I found out to get rid of the error message is removing one of the two scripts file or removing $.getScript(...), but I don't want to do that. I want to be able to keep both scripts running properly in the page.

JS:

$(document).ready(function(){
  //jQuery.noConflict();
  $.getScript("more-content-arrow.js", function(){
    alert("arrow script loaded and executed.");
  });
});

I recreated a jsfiddle with the uncaught type error here:

https://jsfiddle.net/wr6cc2ct/2/

Upvotes: 1

Views: 5383

Answers (1)

Matt D. Webb
Matt D. Webb

Reputation: 3314

Your error appears it be in your more-content-arrow.js file, you were passing an integer as a third argument which is not a handler, here is the jquery doc for .on()

$(window).on('scroll', function () {
    if (!footerIsVisible) {
        $('.bounce').fadeIn(300);
    }
}); // <--- removed integer here.

Update

Alternatively, you can use event.stopPropagation(); along with re-ordering the jquery.unevent.js script after the ember.js script.

$(window).on('scroll', function (e) {
    e.stopPropagation();
    if (!footerIsVisible) {
        $('.bounce').fadeIn(300);
    }
}, 800);

Upvotes: 3

Related Questions