ScriptBundle and jQuery minification causes issues with addEventListener

256 views Asked by At

I'm putting this up as a way to save people time.

I'm using jQuery 1.11.3, and MVC with ScriptBundle

On large pages I started getting errors calling addEventListener in ready.promise

Funnily enough, given u = document; u.addEventListener = undefined but looking at Methods under u shows addEventListener same where u = window;

Looking at the jQuery source, it was obviously

if ( document.readyState === "complete" ) {
            // Handle it asynchronously to allow scripts the opportunity to delay ready
            setTimeout( jQuery.ready );

        // Standards-based browsers support DOMContentLoaded
        } else if ( document.addEventListener ) {
            // Use the handy event callback
            document.addEventListener( "DOMContentLoaded", completed, false );

            // A fallback to window.onload, that will always work
            window.addEventListener( "load", completed, false );

        // If IE event model is used
        }

and the jQuery-1.11.3.min.js was:

else if(y.addEventListener)y.addEventListener("DOMContentLoaded",J,!1),a.addEventListener("load",J,!1);else

So I was going mad trying to figure out the problem.

Then in the js output in the IE debugger I noticed:

else y.addEventListener("DOMContentLoaded",J,!1),a.addEventListener("load",J,!1);else

The check for addEventListener was not there.

I changed the Script Bundle from jquery-{version}.js to jquery.1.11.3.js and everything worked (and the if statement was present).

I changed it back again, and it continued to work, so obviously there is something compilation dependent going on.

1

There are 1 answers

0
Roger Willcocks On

I tracked this down eventually to the MVC minification process either caching or stripping some stuff out of the jQuery scripts. But ONLY if the script were the .min version in the first place.