Support » Plugin: Simple Custom CSS and JS » jQuery(document).ready not working

  • Resolved michalrama

    (@michalrama)


    Hello,

    When I create a JS file with code console.log(123);, it works.

    However, if I add

    jQuery(document).ready(function($) {
       console.log(456);
    });

    only 123 will print it. I found that the site loads jquery (version 1), but even if I create HTML file with code

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    it has no effect.

    What is the correct syntax, please?

    Thank you

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Diana Burduja

    (@diana_burduja)

    You don’t need to load the jQuery library again. By default all WordPress websites load the jQuery 1.12.4 version. See the 203 line in your website’s homepage HTML:
    <script type='text/javascript' src='https://your-website/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp' id='jquery-core-js'></script>

    The

    jQuery(document).ready(function($) {
        console.log(456);
    });

    code will not be executed because it is set to execute after the code in the theme’s public.js file and there is an error about a missing $(…).live function in the public.js file.

    The console.log(123); code will be executed before the DOM is built and before the jQuery library or the public.js file is loaded, therefore it works.

    You need to solve the missing $(…).live function, then your jQuery code will work.

    Thread Starter michalrama

    (@michalrama)

    Hello,

    Yes. You’re right. Thank you for the quick reply.

    Plugin Author Diana Burduja

    (@diana_burduja)

    You’re welcome 🙂

    Hi @diana_burduja ,

    I am a theme author. WordPress does not load jQuery on frontend by default. It only loads it, if the theme / or a plugin has enqueued a jquery script, like so:

    wp_enqueue_script( 'custom-js', get_template_directory_uri() . '/assets/js/custom.min.js', array( 'jquery' ),'',true);

    More and more themes prefer to use vanilla js in their code, this means jQuery is not called on the website! Please check my theme Highstarter for reference (disable all active plugins, because any of them might be loading jQuery, then try adding jquery code via Simple Custom CSS and JS plugin). I have the same problem as @michalrama, jQuery code not working because jQuery is no defined.

    You need to add a check in your plugin to enqueue jQuery automatically if the user uses it in the code snippet from your plugin.

    jQuery(document).ready(function($) {
        //Code
    });

    Please consider adding this to the plugin, this is really important because more and more themes do not use jQUery and a lot of non-tech users ask me for suppport because they cannot figure out why their jquery script does not work in my theme. I will also list this as a seperate thread. Cheers and take care!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘jQuery(document).ready not working’ is closed to new replies.