DOM exception while using minified js

Question

I have 6 Javascript files in my project whose functionality works perfectly fine when kept as it is. If i minify all these js files using(jscompress.com) into single file. When i click on a particular button - it gets stuck with disabled.

"Failed to execute 'webkitMatchesSelector' on 'Element': '[test!='']:sizzle' is not a valid selector." name: "SyntaxError" stack: "Error: Failed to execute 'webkitMatchesSelector' on 'Element': '[test!='']:sizzle' is not

When do we get this sort of exception, as this doesn't appear to be something directly related to my project code. Is this related to the minifier?

Answer 1

This exception can occur for many reasons. Exception can be simulated like below

sample script:

<script type="text/javascript" src="resources/jquery.min.js" ></script> 
<script type='text/javascript'>
   $(document).ready(function() {
        $('.form').submit(function(event) {
           console.log("Form submitted");
        });
    });
</script>

In the above example, If we remove $(document).ready(function() then below exception will be thrown by jquery

Failed to execute 'webkitMatchesSelector' on 'Element': '[test!='']:sizzle' 
is not a valid selector." name: "SyntaxError" 
stack: "Error: Failed to execute 'webkitMatchesSelector' on 
'Element': '[test!='']:sizzle' is not valid selector.

If you are seeing this exception, verify if document loading is failing.

For your reference, documentation of jQuery.ready() :

While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code. When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts.

In cases where code relies on loaded assets (for example, if the dimensions of an image are required), the code should be placed in a handler for the load event instead.