Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – Jquery has to load twice to work or it fails

I have my wordpress page and aparently it already loads JQuery, but if I don’t load it again (exactly the same version moreover), any Jquery function I use will fail showing $ is not recognized.

example: https://delaytelo.com/recipes/
It’s loaded twice, but removing the one from cloudflare will make the page break…

Tags:

2

Answers


  1. 0

    As per the comments, you will need to do this:

    jQuery(document).ready(function($) { 
    $(document).on('click','#calculatecal',function(){ 
        $("#caloryresult h3").html( $("input[name=calculation-1]").val() + " Kcal");         
    }); 
});

    The reason is not that you are trying to use jQuery before it is initialized. The actual reason is that:

    1. WordPress adds jQuery as jQuery and NOT as $. Within a WordPress site, jQuery is never abbreviated to $, because it might conflict with other javascript libraries that have $ as identifier.

    Still, you can use $ inside a document ready callback if you provide it as the argument, since jQuery is programmed to supply its own object as the argument to this document ready function. So this: function($) will make the jQuery object available inside the function as $.

    1. You have to tell jQuery to wait for the DOM to be ready before you can manipulate the DOM. That’s why jQuery(function($){}); should be used…
    Login or Signup to reply.
  2. 0

    For people wondering what the issue was: The Jquery was being used without a function that checks if Jquery is loaded yet. For example:
    jQuery(document).ready(function($) {

    })
    Read more:
    How do I add a simple jQuery script to WordPress?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search