'$ is undefined' error, but 'jQuery' works

Question

I have these lines of code which is the cause of an error message. It seems to me that there is no mistake in the code, but I guess I'm wrong:

jQuery(document).ready(function() {
  console.log("ready!");

  $("#hover-table").hover(function() { // THIS IS LINE 164    
    $('#table-wrapper').show();
  }, function() {
    $('#table-wrapper').hide();
  });
});

I get this error message in the Chrome console. The console.log is printed with no problem.

(index):164 Uncaught TypeError: $ is not a function
at HTMLDocument. ((index):164)
at i (jquery.js?ver=1.12.4:2)
at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4:2)
at Function.ready (jquery.js?ver=1.12.4:2)
at HTMLDocument.K (jquery.js?ver=1.12.4:2)

What am I missing here?

looks like you have changed your `$` to `jQuery` - might be because of a no conflict? See this post: https://stackoverflow.com/questions/6746352/replace-dollar-sign-with-jquery — Pete, Sep 12 '18 at 11:48
@Mohammad Without loading jQuery the error would be `Uncaught TypeError: jQuery is not a function`! — Ram, Sep 12 '18 at 11:52
1) conflicting libraries or 2) some earlier JavaScript breaks, resulting in the following JavaScript to break. — Martin, Sep 12 '18 at 12:06

Zakaria Acharki · Answer 1 · 2018-09-12T14:02:50.003

It may that another library using the dollar sign instead of jQuery what will create this conflict so you could replace all the dollars signs $ with jQuery like :

<script>
    jQuery(document).ready(function() {
        console.log("ready!");

        jQuery("#hover-table").hover(function() { // THIS IS THE LINE 164---
            jQuery('#table-wrapper').show();
        }, function() {
            jQuery('#table-wrapper').hide();
        });
    }); 
</script>

Or also you could define it for inside-block use like :

jQuery(document).ready(function($){
    //You can now use $ as your jQuery object.
});

score 2 · Answer 2 · answered Sep 12 '18 at 11:50

Try with below code, looks like you have changed the $ to jQuery

<script> 
jQuery(document).ready(function(){
   console.log( "ready!" );
   jQuery("#hover-table").hover(function(){ // THIS IS THE LINE 164---
     jQuery('#table-wrapper').show();
   },function(){
     jQuery('#table-wrapper').hide();
  });
 }); 
</script>

'$ is undefined' error, but 'jQuery' works

2 Answers2