Uncaught Error: Syntax error, unrecognized expression: a[href*=#]

WordPress was nice enough to release “Coleman” on my birthday. That’s April 12th for those of you who don’t know my personally. Theres’ a number of under the hood and user-interface improvements but there was also a slew of library updates that cause me and likely many others a few more headaches after upgrading the usual.

JavaScript Library Updates

jQuery 1.12.3, jQuery Migrate 1.4.0, Backbone 1.2.3, and Underscore 1.8.3 are bundled.

Sarcasm aside, library updates are the cause of 50% of my support issues over at Windsor Digital. The problem is always the same:

WordPress Update Gone Wild

No not really. WordPress is really never to blame. Every piece of software has bugs but ‘upgrade bugs’ are generally the result of some Plugin not updating to accommodate the changes in the latest release. In my case it was an old theme and an out of date Visual Composer Plugin (not directly related to this error).

The short answer here is the following jQuery selector is actually invalid and always has been. It’s just that jQuery never actually threw and error until jQuery 1.12.

//This is not valid
$(‘a[href*=#]’)

// Or an example of one of the bugs that popped up for me
function k_smoothscroll()
{
jQuery(‘a[href*=#]’).click(function() {

I don’t, care. How do I fix?

We fix it by changing the selector to something valid. The above selector just get’s all links that link within a page like:

 <a href="#some-id">I link to an ID on the page</a> 

We can still do this, it’s just that the all meta characters need to escaped with a “\\”. You can read all about this in the jQuery Docs. Know this the simple fix is:

//This is valid
$(‘a[href*=\\#]’)

// Or
function k_smoothscroll()
{
jQuery(‘a[href*=\\#]’).click(function() {

A bad way to fix this

I’ve sen a number of recommendations including reverting to an older WordPress version. While this might be a viable temporary solution to make fix your site it should only be a temporary solution while you find the offending code.

Something that looks like this:


function modify_jquery() {
if (!is_admin()) {
wp_deregister_script(‘jquery’);
wp_register_script(‘jquery’, ‘https://code.jquery.com/jquery-1.11.3.min.js’);
wp_enqueue_script(‘jquery’);
}
}
add_action(‘init’, ‘modify_jquery’);

Not sure what this does? This ‘deregisters’ whatever WordPress is including for jQuery and then adds the out-off-date version. While there is really not necessarily anything wrong with not using the most up to date jQuery Library and this very well may solve your problem I can almost assure you that it will cause more problems down the road if not immediately.

The issue here is that Plugins that are up to date will depend on and should know the version of jQuery included by default in WordPress. If you take this away, Plugin and Theme developers could use or write code expecting 1.12 to be available whereas in reality 1.11 is actually included. Not to mention, 5 years from now when jQuery is many, many releases down the road, your site will still be including 1.11.

Posting code? Do it like this:

⟨pre⟩⟨code⟩ var foo = 'bar'; ⟨/code⟩⟨/pre⟩