FIXED: Wordpress site Uncaught TypeError: jQuery(...).live is not a function causing images with JS to not show

Question

I am building a WordPress site and suddenly am getting the error:

Uncaught TypeError: jQuery(...).live is not a function
    at HTMLDocument.<anonymous> (main.js?ver=1.1:214)
    at i (jquery.js?ver=1.12.4-wp:2)
    at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4-wp:2)
    at Function.ready (jquery.js?ver=1.12.4-wp:2)
    at HTMLDocument.J (jquery.js?ver=1.12.4-wp:2)

I am unsure how to replicate this error as it is a sudden occurrence.

When I visit my site no images are loading which have JS

I have checked my plugins and don't seem to see anything new added when I view the site in Elementor all images are showing, any ideas of how to fix this? None of this site has been raw coded just pure WordPress

Can anyone inspect element and tell me if/what plugin is causing me issues?

Answer 1

Wordpress 5.5 stopped using jQuery migrate. This change has been causing problems with old plugins and themes. If you are noticing issues after upgrading to Wordpress 5.5, installing this plugin might fix it: https://wordpress.org/plugins/enable-jquery-migrate-helper/

Though, ultimately a better solution would be to either upgrade your current plugins and themes to versions that do not rely on jQuery migrate. Or, if that is not possible, try to move away from those plugins to ones that do not require jQuery migrate. If you don't, you will likely run into compatibility issues in the future or, even worse, security vulnerabilities from these outdated plugins/themes.

UPDATE: Sep 18, 2020

I looked at the source code for the Enable jQuery Migrate Helper plugin and it has this condition for running:

if ( version_compare( $GLOBALS['wp_version'], '5.6-alpha', '<' ) && ! class_exists( 'jQuery_Migrate_Helper' ) ) {
    include_once __DIR__ . '/class-jquery-migrate-helper.php';
    add_action( 'plugins_loaded', array( 'jQuery_Migrate_Helper', 'init_actions' ) );
}

So, the plugin will only work up to, and including, Wordpress 5.5. Once Wordpress hits version 5.6-alpha, it will stop working.

UPDATE: Feb 15, 2021

The plugin code has been updated to work past Wordpress 5.6. However, at and after version 5.6, it will include jquery-migrate-3.3.2 instead of jquery-migrate-1.4.1 and it includes a lot fewer files (mostly jquery-ui scripts). If you want to continue using the older version of jquery, there are a couple options.

Option A. You could copy the jquery migrate plugin to a new folder (basically make it your own plugin), rename it, edit the class-jquery-migrate-helper.php file, find this line in the replace_scripts function:

if ( version_compare( $GLOBALS['wp_version'], '5.6-alpha', '<' ) || 'yes' === get_option( '_jquery_migrate_downgrade_version', 'no' ) ) {

And replace it with:

if(true) {

This will cause the plugin to always install the old version of jquery.

Option B. Create a new plugin that just includes the old jquery files by doing the following:

1. Create a new plugin.
2. Copy all of the enable-jquery-migrate-helper/js files from the jquery migrate plugin to the js/ folder in your new plugin.
3. Add this code to your plugin file:

add_action('wp_default_scripts', function ($scripts) {
    $setScripts = function($scripts, $handle, $src, $deps = [], $ver = false, $in_footer = false) {
        $script = $scripts->query( $handle, 'registered' );

        if ( $script ) {
            // If already added
            $script->src  = $src;
            $script->deps = $deps;
            $script->ver  = $ver;
            $script->args = $in_footer;

            unset( $script->extra['group'] );

            if ( $in_footer ) {
                $script->add_data( 'group', 1 );
            }
        } else {
            // Add the script
            if ( $in_footer ) {
                $scripts->add( $handle, $src, $deps, $ver, 1 );
            } else {
                $scripts->add( $handle, $src, $deps, $ver );
            }
        }
    };

    $assets_url = $assets_url = plugins_url( 'js/', __FILE__  );

    $setScripts( $scripts, 'jquery-migrate', $assets_url . 'jquery-migrate/jquery-migrate-1.4.1-wp.js', array(), '1.4.1-wp' );
    $setScripts( $scripts, 'jquery-core', $assets_url . 'jquery/jquery-1.12.4-wp.js', array(), '1.12.4-wp' );
    $setScripts( $scripts, 'jquery', false, array( 'jquery-core', 'jquery-migrate' ), '1.12.4-wp' );
    $setScripts( $scripts, 'jquery-ui-core', $assets_url . 'jquery-ui/core.min.js', array( 'jquery' ), '1.11.4-wp', 1 );
    $setScripts( $scripts, 'jquery-effects-core', $assets_url . 'jquery-ui/effect.min.js', array( 'jquery' ), '1.11.4-wp', 1 );
    $setScripts( $scripts, 'jquery-effects-blind', $assets_url . 'jquery-ui/effect-blind.min.js', array( 'jquery-effects-core' ), '1.11.4-wp', 1 );
    $setScripts( $scripts, 'jquery-effects-bounce', $assets_url . 'jquery-ui/effect-bounce.min.js', array( 'jquery-effects-core' ), '1.11.4-wp', 1 );
    $setScripts( $scripts, 'jquery-effects-clip', $assets_url . 'jquery-ui/effect-clip.min.js', array( 'jquery-effects-core' ), '1.11.4-wp', 1 );
    $setScripts( $scripts, 'jquery-effects-drop', $assets_url . 'jquery-ui/effect-drop.min.js', array( 'jquery-effects-core' ), '1.11.4-wp', 1 );
    $setScripts( $scripts, 'jquery-effects-explode', $assets_url . 'jquery-ui/effect-explode.min.js', array( 'jquery-effects-core' ), '1.11.4-wp', 1 );
    $setScripts( $scripts, 'jquery-effects-fade', $assets_url . 'jquery-ui/effect-fade.min.js', array( 'jquery-effects-core' ), '1.11.4-wp', 1 );
    $setScripts( $scripts, 'jquery-effects-fold', $assets_url . 'jquery-ui/effect-fold.min.js', array( 'jquery-effects-core' ), '1.11.4-wp', 1 );
    $setScripts( $scripts, 'jquery-effects-highlight', $assets_url . 'jquery-ui/effect-highlight.min.js', array( 'jquery-effects-core' ), '1.11.4-wp', 1 );
    $setScripts( $scripts, 'jquery-effects-puff', $assets_url . 'jquery-ui/effect-puff.min.js', array( 'jquery-effects-core', 'jquery-effects-scale' ), '1.11.4-wp', 1 );
    $setScripts( $scripts, 'jquery-effects-pulsate', $assets_url . 'jquery-ui/effect-pulsate.min.js', array( 'jquery-effects-core' ), '1.11.4-wp', 1 );
    $setScripts( $scripts, 'jquery-effects-scale', $assets_url . 'jquery-ui/effect-scale.min.js', array( 'jquery-effects-core', 'jquery-effects-size' ), '1.11.4-wp', 1 );
    $setScripts( $scripts, 'jquery-effects-shake', $assets_url . 'jquery-ui/effect-shake.min.js', array( 'jquery-effects-core' ), '1.11.4-wp', 1 );
    $setScripts( $scripts, 'jquery-effects-size', $assets_url . 'jquery-ui/effect-size.min.js', array( 'jquery-effects-core' ), '1.11.4-wp', 1 );
    $setScripts( $scripts, 'jquery-effects-slide', $assets_url . 'jquery-ui/effect-slide.min.js', array( 'jquery-effects-core' ), '1.11.4-wp', 1 );
    $setScripts( $scripts, 'jquery-effects-transfer', $assets_url . 'jquery-ui/effect-transfer.min.js', array( 'jquery-effects-core' ), '1.11.4-wp', 1 );
    $setScripts( $scripts, 'jquery-ui-accordion', $assets_url . 'jquery-ui/accordion.min.js', array( 'jquery-ui-core', 'jquery-ui-widget' ), '1.11.4-wp', 1 );
    $setScripts( $scripts, 'jquery-ui-autocomplete', $assets_url . 'jquery-ui/autocomplete.min.js', array( 'jquery-ui-menu', 'wp-a11y' ), '1.11.4-wp', 1 );
    $setScripts( $scripts, 'jquery-ui-button', $assets_url . 'jquery-ui/button.min.js', array( 'jquery-ui-core', 'jquery-ui-widget' ), '1.11.4-wp', 1 );
    $setScripts( $scripts, 'jquery-ui-datepicker', $assets_url . 'jquery-ui/datepicker.min.js', array( 'jquery-ui-core' ), '1.11.4-wp', 1 );
    $setScripts( $scripts, 'jquery-ui-dialog', $assets_url . 'jquery-ui/dialog.min.js', array( 'jquery-ui-resizable', 'jquery-ui-draggable', 'jquery-ui-button', 'jquery-ui-position' ), '1.11.4-wp', 1 );
    $setScripts( $scripts, 'jquery-ui-draggable', $assets_url . 'jquery-ui/draggable.min.js', array( 'jquery-ui-mouse' ), '1.11.4-wp', 1 );
    $setScripts( $scripts, 'jquery-ui-droppable', $assets_url . 'jquery-ui/droppable.min.js', array( 'jquery-ui-draggable' ), '1.11.4-wp', 1 );
    $setScripts( $scripts, 'jquery-ui-menu', $assets_url . 'jquery-ui/menu.min.js', array( 'jquery-ui-core', 'jquery-ui-widget', 'jquery-ui-position' ), '1.11.4-wp', 1 );
    $setScripts( $scripts, 'jquery-ui-mouse', $assets_url . 'jquery-ui/mouse.min.js', array( 'jquery-ui-core', 'jquery-ui-widget' ), '1.11.4-wp', 1 );
    $setScripts( $scripts, 'jquery-ui-position', $assets_url . 'jquery-ui/position.min.js', array( 'jquery' ), '1.11.4-wp', 1 );
    $setScripts( $scripts, 'jquery-ui-progressbar', $assets_url . 'jquery-ui/progressbar.min.js', array( 'jquery-ui-core', 'jquery-ui-widget' ), '1.11.4-wp', 1 );
    $setScripts( $scripts, 'jquery-ui-resizable', $assets_url . 'jquery-ui/resizable.min.js', array( 'jquery-ui-mouse' ), '1.11.4-wp', 1 );
    $setScripts( $scripts, 'jquery-ui-selectable', $assets_url . 'jquery-ui/selectable.min.js', array( 'jquery-ui-mouse' ), '1.11.4-wp', 1 );
    $setScripts( $scripts, 'jquery-ui-selectmenu', $assets_url . 'jquery-ui/selectmenu.min.js', array( 'jquery-ui-menu' ), '1.11.4-wp', 1 );
    $setScripts( $scripts, 'jquery-ui-slider', $assets_url . 'jquery-ui/slider.min.js', array( 'jquery-ui-mouse' ), '1.11.4-wp', 1 );
    $setScripts( $scripts, 'jquery-ui-sortable', $assets_url . 'jquery-ui/sortable.min.js', array( 'jquery-ui-mouse' ), '1.11.4-wp', 1 );
    $setScripts( $scripts, 'jquery-ui-spinner', $assets_url . 'jquery-ui/spinner.min.js', array( 'jquery-ui-button' ), '1.11.4-wp', 1 );
    $setScripts( $scripts, 'jquery-ui-tabs', $assets_url . 'jquery-ui/tabs.min.js', array( 'jquery-ui-core', 'jquery-ui-widget' ), '1.11.4-wp', 1 );
    $setScripts( $scripts, 'jquery-ui-tooltip', $assets_url . 'jquery-ui/tooltip.min.js', array( 'jquery-ui-core', 'jquery-ui-widget', 'jquery-ui-position' ), '1.11.4-wp', 1 );
    $setScripts( $scripts, 'jquery-ui-widget', $assets_url . 'jquery-ui/widget.min.js', array( 'jquery' ), '1.11.4-wp', 1 );
    $setScripts( $scripts, 'jquery-touch-punch', false, array( 'jquery-ui-widget', 'jquery-ui-mouse' ), '0.2.2', 1 );
}, -10);

Answer 2

Wordpress 5.5 stopped using jquery migrate. It's been causing problems with old plugins and themes. This is the fix: https://wordpress.org/plugins/enable-jquery-migrate-helper/