未捕获的 ReferenceError：jQuery 未在 wordpress 自定义脚本中定义

Question

My jquery file is not working in WordPress.

The error is here:

My js code:

(function($) {
    $(document).ready(function(){
    $('#read_more').click(function() {
    $('.display_none').show().animate({'transition': '2s'});
   });
  });
})( jQuery );

I have an added custom-script.js file in functions.php like this:

function aristo_css_js(){
  wp_enqueue_script('myjs', get_template_directory_uri().'/assets/js/custom-script.js');
  wp_enqueue_script('myjs');
}
add_action('wp_enqueue_scripts','aristo_css_js');

What is the main problem for this was not working? But if I added custom script code before body tag it's working. ?

Answer 1

I solve my own question by add jquery file before my custom-script

wp_enqueue_script('jquery-main', get_template_directory_uri().'/assets/js/jquery-3.3.1.min.js');
wp_enqueue_script('myjs', get_template_directory_uri().'/assets/js/custom-script.js');

Answer 2

I hope this will fix your issue

(function($) {

// Use $() inside of this function like so 

$(#selector)

})(jQuery);

Answer 3

I had this same issue once.

WordPress ships with its own version of the jQuery library.

Try using jQuery instead of just $ sign.

For example:

var svg = $("#svg-container");

should be replaced with

var svg = jQuery("#svg-container");

Answer 4

Try to use this updated javascript code,

 jQuery.noConflict(); (function(jQuery) { jQuery(document).ready(function(){ jQuery('#read_more').click(function() { jQuery('.display_none').show().animate({'transition': '2s'}); }); }); })( jQuery );

 function aristo_css_js(){ wp_enqueue_script('jquery-main', get_template_directory_uri().'/assets/js/jquery-3.3.1.min.js'); wp_enqueue_script('myjs', get_template_directory_uri().'/assets/js/custom-script.js'); } add_action('wp_enqueue_scripts','aristo_css_js');

Thanks!