WordPress 4.5, jQuery 1.12 and compatibility issues

JavaScript Error

JavaScript Error

One of updates included into WordPress 4.5 is jQuery 1.12.3 replaced jQuery 1.11.3. Cool!
But there is a known issue with older JavaScript code. If your plugin or theme contains code snippet like one below, you will get error message:
“Uncaught Error: Syntax error, unrecognized expression: a[href=#scroll-top]”

jQuery(document).ready(function ($) {
	$('a[href=#scroll-top]').click(function () {
		$('html, body').animate({
			scrollTop: 0
		}, 'slow');
		return false;
	});
});

This code belongs to “jQuery Scroll Top Plugin” and included into the verson 0.0.8 of “Responsive Mobile” theme package from CyberChimps in my case.

How to fix this bug?

The best way to resolve this and similar issues is:
1) update to the latest version of a product.
2) if problem was not resolved after update, contact plugin or theme developer with a support request.
3) if you can not get a valuable answer from developer in a meaning time, follow recommendations below:

The source of this problem is that starting from jQuery 1.12 it’s a requirement to enclose any CSS, HTML selector, like this href=#scroll-top to the pair brackets. In our case as a single quotes are used already in this expression, we should use a double quote, like this 'a["href=#scroll-top"]'.
Full version of the fixed code should be looked this way finally:

jQuery(document).ready(function ($) {
	$('a[href="#scroll-top"]').click(function () {
		$('html, body').animate({
			scrollTop: 0
		}, 'slow');
		return false;
	});
});

This trivial update fixes the error and problem.

Source of the information: https://github.com/jquery/jquery/issues/2824

This small and simple fix allows you to update your WordPress to the latest 4.5 and do not wait while your theme or plugin developer publish its own fix to provide compatibility with the jQuery 1.12.x.

Divi theme

Divi theme version 2.6.4.1 has the similar problem compatibility problem with jQuery v. 1.12.
It shows this error at the browser JavaScript console after update to WordPress 4.5:

jquery.js?ver=1.12.3:2 Uncaught Error: Syntax error, unrecognized expression: a[href*=#]:not([href=#])

Divi Version 2.7.3 ( updated 04-13-2016 ) fixes the jQuery issue outlined below. Update your theme.

If you can not update to the latest version, fix this bug yourself:

Open file: wp-content/themes/Divi/js/custom.js
Go to line #706

$( 'a[href*=#]:not([href=#])' ).click( function() {

and enclose # character with double quotes, like this

$( 'a[href*="#"]:not([href="#"])' ).click( function() {

It fixes a JavaScript error which prevented jQuery code execution.

Other themes or plugins

General scenario to find a source of errors of this kind by your own hands:

Make a context search of your theme/plugin JavaScript files for the occurrence of this key
[href
and look if some of them don’t uses quotes after = sign.

To be more exact use as a search key a copy of unrecognized expression from the error message at the browser JavaScript console.

Edit those places adding pair quotes like we did in examples above.

WordPress support team published this resource resource for known compatibility problem with WordPress 4.5:
https://wordpress.org/support/topic/read-this-first-wordpress-45-master-list

  • Ito Martinez Alonso

    Yes, super cheers! It works! In my template, custom.all.js had the bug!

    Thnxs

  • Григорий

    Thank you very much for your explanation, my friend! I think a lot of Newsmag and Mapify admins will joins to my thanks.

  • Toby

    After WP Update to 4.5 around 5 Sites of mine completely broke, Revolution Slider, Bootstrap toggle functions.. almost everything.. I have tried looot’s of different solutions – none with success.

    This snippet did it – awesome – saved my daaaaaaaaay! So nice – thank you very very much !!!